7

jQuery UIで、javascriptを使ったドラッグ&ドロップ操作は可能ですか?

例。リンクがクリックされたら、 を にドラッグ アンド#ponyドロップし#boxます。ドラッグイベントをトリガーしようとしましたが、うまくいかないようです:)

$('#pony').trigger('drag', [$('#box')]);
4

2 に答える 2

17

これは、jQuery UI チームがプログラムdropでイベントをトリガーする方法です。

droppable_events.js :

draggable = $( "#draggable1" ).draggable(),
droppable1 = $( "#droppable1" ).droppable( config ),
droppable2 = $( "#droppable2" ).droppable( config ),

droppableOffset = droppable1.offset(),
draggableOffset = draggable.offset(),
dx = droppableOffset.left - draggableOffset.left,
dy = droppableOffset.top - draggableOffset.top;

draggable.simulate( "drag", {
    dx: dx,
    dy: dy
});

simulate関数はjquery.simulate.jsで定義されています。簡単に言えば、ドラッグ可能なものをドロップ可能なものに移動して、イベントをトリガーしdropます。

これをまとめると、次のスニペットがあります。乾杯。

$(function() {
  $("#draggable").draggable();
  $("#droppable").droppable({
    drop: function(event, ui) {
      console.log(event, ui);
      alert('dropped!');
    }
  });
});

function trigger_drop() {
  var draggable = $("#draggable").draggable(),
    droppable = $("#droppable").droppable(),

    droppableOffset = droppable.offset(),
    draggableOffset = draggable.offset(),
    dx = droppableOffset.left - draggableOffset.left,
    dy = droppableOffset.top - draggableOffset.top;

  draggable.simulate("drag", {
    dx: dx,
    dy: dy
  });
}
#draggable {
  width: 100px;
  height: 100px;
  padding: 0.5em;
  float: left;
  margin: 10px 10px 10px 0;
}
#droppable {
  width: 150px;
  height: 150px;
  padding: 0.5em;
  float: left;
  margin: 10px;
}
br {
  clear: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>

<script src="https://rawgit.com/jquery/jquery-ui/1-11-stable/external/jquery-simulate/jquery.simulate.js"></script>


<div id="draggable" class="ui-widget-content">
  <p>Drag me to my target</p>
</div>

<div id="droppable" class="ui-widget-header">
  <p>Drop here</p>
</div>
<br>
<button onclick="trigger_drop()">trigger drop event</button>

于 2015-03-26T17:04:29.363 に答える
2

  • 実際にオブジェクトをマウスでドロップしたときと同じ機能を起動したい場合は、ドロップ スクリプトを関数にカプセル化し、他の場所でも簡単に呼び出すことができます。

  • アイテムをドラッグ アンド ドロップするアニメーション モーションが必要な.stop().animate({})場合は、目的の位置に移動してから、上記の手順を実行します。

  • 単にドロップ ターゲットに追加するだけの場合は、.appendTo($('#yourtargetid'));.

何か誤解していたら申し訳ありませんが、私の評判ポイントは、他の場所と同じように、事前にあなたに尋ねるだけでは十分ではありません.

于 2013-05-31T01:21:10.563 に答える