JQusey をカプセル化する UI プラグインとして、easyui は実際には非常に使いやすく、少なくとも私のようなクズな人間は多くの時間を節約できます。
ドラッグ可能は 2 つの方法でロードできます:
1、次のようにクラスを通じてロードされます:
<div id="box" class="easyui-draggable"></div>
次のように JS 経由で読み込みます:
$('#box').draggable();
上記の 2 つの点は、「easyui-draggable」と draggable の両方が固定されており、easyui によって作成された関数を呼び出すことで jQuery の効果を実現していることに注意してください。
ドラッグ可能なプロパティ:
revert 値が true の場合、ドラッグが停止すると開始位置に戻り、どこでもドラッグできます。
元に戻す: ブール値、
軸 ドラッグの方向を制限します、水平 'h'?縦の「v」?これは、ドラッグ方向を
に設定すると、さらに興味深いものになります。縦書きの場合は、WeChatやWeiboのメッセージを更新するのと同じです。
軸: 文字列/'v'/'h',
プロキシ クローン作成とは、ドラッグするときにドラッグするオブジェクトを変更せずに、マウスでドラッグするオブジェクトをコピーすることを意味します。もちろん
他のものにすることも、関数をトリガーすることもできます。
プロキシ: null/文字列/関数、
他にも属性はたくさんありますが、特に興味深いものではないと思います。
cursor: move/String, //ドラッグ時のポインタのCSSスタイルを指定して美しくします
deltaX : null/数値、
deltaY: null/number, //ドラッグされた要素は、現在のカーソル位置の x、y に対応します。これは、ドラッグされた要素とカーソルの間の距離
です。
handle: null/selector //ドラッグを開始するハンドル Handle!ハンドルをドラッグするだけです。はい!
disabled : boolean // true に設定すると、現在バインドされている要素はドラッグできません
edge:number // コンテナ内でドラッグできるコンテナの幅 コンテナの上下左右から数えると、長方形の中に長方形が入ったような形になり、内側の要素はドラッグできるようになります。マウスは内側の長方形に置かれます
例:
$('#box').draggable({ revert : true, cursor: 'text', handle : '#pox', disabled : false, edge : 50, axis :'v', proxy : 'clone', deltaX: 10, deltaY : 10, proxy: function(source){ console.log('呵呵哒!'); } });
ドラッグ可能なイベント:
onBeforeDrag はドラッグする前にトリガーされ、false を返すとドラッグがキャンセルされます
onBeforeDrag : function (e){ alert('拖动之前触发'); return false; }
onStartDrag は
をドラッグするときにトリガーされますonStartDrag : function(e){ alert('拖动时触发'); }
onDrag はドラッグ プロセス中にトリガーされ、ドラッグが不可能な場合は false を返します
onDrag : function(e){ alert('拖动过程触发'); }
ドラッグが停止すると onDrag がトリガーされます
onStopDrag : function (e){ alert('在拖动停止时触发'); }
ドラッグ可能なメソッドのリスト
オプションは属性オブジェクトを返します
console.log($('#box').draggable('options'));
プロキシ プロキシ属性が設定されている場合は、ドラッグ プロキシ要素
を返します。console.log($('#box').draggable('proxy'));
ドラッグ可能
$('#box').draggable('enable');
無効にすると、ドラッグが禁止されます
$('#box').draggable('disable');
簡単な例を見てみましょう
<pre class="brush:java;">html> <meta charset="UTF-8"> <title>Basic Draggable - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/metro/easyui.css"> <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/icon.css"> <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/demo/demo.css"> <script type="text/javascript" src="jquery-easyui-1.3.6/jquery.min.js"></script> <script type="text/javascript" src="jquery-easyui-1.3.6/jquery.easyui.min.js"></script> <h2>Basic Draggable</h2> <p>Move the boxes below by clicking on it with mouse.</p> <div id="dd" class="easyui-draggable" data-options="handle:'#title'" style="width:100px;height:100px;"> <div id="title" style="background:#ccc;width:100px;height:100px;">容器里面的内容</div> </div> <script> $(function () { $("#title").draggable({ proxy: function (a) { var a = $('<div class="proxy_div">你拖我干啥</div>'); a.appendTo('body'); return a; }, cursor: 'pointer', edge: '6' }); }); </script>
上記は Easyui 1.2.5 Draggable のほぼすべてのプロパティ、イベント、メソッド、例です。何か間違っている場合は、コメントして議論し、一緒に教えてください。