easyui ドラッグ可能なコンポーネントはドラッグ効果_jqueryを実装します

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 のほぼすべてのプロパティ、イベント、メソッド、例です。何か間違っている場合は、コメントして議論し、一緒に教えてください。