簡単にUIのエントリー

簡単UIは、一般的にUIとバックエンドの開発UI、重いのエンタープライズクラスの開発に使用されます。

1.Draggable（ドラッグ）コンポーネントが他のコンポーネントに依存しません

1.1ロード

<！DOCTYPE HTML> 
<HTML LANG = " EN " > 
<HEAD> 
    <メタ文字コード= " UTF-8 " > 
    <タイトル>ドキュメント</ TITLE> 
    <リンクのrel = " スタイルシート"タイプ= " テキスト/ cssの" HREF = " easyui /テーマ/デフォルト/ easyui.css " > 
    <リンクのrel = " スタイルシート"タイプ= " テキスト/ cssの"のhref = " easyui /テーマ/ icon.css " > 
    <スクリプトタイプ= 「テキスト/ javascriptの」SRC = " easyui / jquery.min.js " > </ SCRIPT> 
    <スクリプトタイプ= " テキスト/ javascriptの" SRC = " JS / Demo.JS " > </ SCRIPT> 
    <スクリプトタイプ= " テキスト/ javascriptの" SRC = " easyui / jquery.easyui.min.js " > </ SCRIPT> 
</ HEAD> 
<BODY> 
    の<divのid = " ボックス"スタイル= " 幅：400ピクセル、高さ200pxの;背景：オレンジ; " > 
        内容部分
     < / DIV> 
</ BODY>
</ HTML>

DIVボックス

$（関数（）{ 

 $（' #box ' ）.draggable（）; 

}）;

1.2プロパティリスト

$（関数（）{ 
 $（' #box ' ）.draggable（{ 
  元に戻すは：trueに、// trueに設定され、その後、ドラッグ開始位置停止 
  カーソル：' 移動'、// ドラッグポインタCSSスタイルテキストスタイルにテキストスタイルを移動するためにポインタを移動 
  [無効]：trueに、// falseにすることができませんドラッグ 
  エッジ：50、// 幅ドラッグコンテナ 
  軸：「V 」、// V垂直抗力、時間水平ドラッグ 
  プロキシ：" クローン"、// 代わりにドラッグ要素のクローン 
  プロキシ：機能（ソース）{ // 不可視のドラッグ要素
   VARの P = $（' <divのスタイル= "幅：400ピクセル、高さ200pxの;国境：5pxの;破線：#CCC"> ' ）
   p.appendTo（' 身体' ）
    のリターンのp; 
  } 
    }）。
}）;

プロパティリスト

1.3イベントリスト

$（関数（）{ 
 $（' #box ' ）.draggable（{ 
   onBeforeDrag：機能（E）
   { 
   アラート（" ドラッグプレトリガーを！" ）; 
   } 
   OnStartDragイベント：機能（E）
   { 
   アラート（「ドラッグ開始トリガ！" ）; 
   } 
    onDrag：機能（E）
   { 
   アラート（" トリガーをドラッグ！" ）; 
   } 
   onStopDrag：機能（E）
   { 
   アラート（" ！トリガドラッグ" ）; 
   } 
    }）; 
}）;

イベントリスト

1.4メソッドのリスト

$（' #Box '（.draggable）' 無効' ）; 
$（' #box '）.draggable（' 有効' ）; 
$（' #box '）.draggable（' オプション' ）; 
$（" #box 「）.draggable（」プロキシ"）; // イベントを実行し、ドラッグで見ることができます

メソッド一覧

2.Droppable（部品配置）

$（関数（）{ 
$（' #dd '）.droppable（{ // 配置されたコンポーネントを 
受け入れる：' #boxを'、// 許容される成分
 // 無効：trueに、// ドラッグは、一般的に有効な書き込みではありません
onDragEnter ：機能（E、出所）
{ 
$（この）の.css（' 背景'、' 青' ）; 
}、
は、OnDblClick：機能（E、出所）//はのみ入力トリガをトリガ停止します
{ 
$（これを）の.css（' 背景'、' オレンジ'）; 
}、
onDrop：機能（E、出所）// 位置エリアに入れて、マウスボタン、残しての操作リリース
{ 
$（この）の.css（' 背景'、' 白' ）; 
}、

} ）; 
$（' #box ' ）.draggable（{}）; 
}）;

ドロップ可

3.Resizable（リサイズ）成分

おすすめ