以编程方式将元素拖放到另一个元素上 [英] Programmatically drag and drop element onto another element

问题描述

使用jQuery UI，是否可以执行拖动和放大使用javascript删除操作？

示例。单击链接后，拖动 #pony 并将其放入 #box 。我已经尝试触发拖动事件，但这似乎不起作用：）

  $（'＃pony'）。触发器（'拖'，[$（'＃box'）]）; 
  

解决方案

这是jQuery UI团队以编程方式触发 drop event。

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 
}）; 
  

模拟函数在 jquery.simulate.js 。简单来说，它将draggable移动到droppable上以触发 drop 事件。

完全放上这个，我们有以下片段。干杯。

< pre class =snippet-code-js lang-js prettyprint-override> $（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;身高：100px;填充：0.5em;向左飘浮;保证金：10px 10px 10px 0;}＃droppable {width：150px;身高：150px;填充：0.5em;向左飘浮;保证金：10px;} br {clear：both;}  

  < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< link rel =stylesheethref = 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 =draggableclass =ui-widget-content> < p>将我拖到我的目标< / p>< / div>< div id =droppableclass =ui-widget-header> < p> Drop here< / p>< / div>< br>< button onclick =trigger_drop（）>触发放弃事件< / button>  

With jQuery UI, is it possible to execute a drag & drop operation using javascript?

Example. When the link is clicked, drag the #pony and drop it into the #box. I've tried triggering the drag event but that doesn't seem work :)

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

解决方案

This is how the jQuery UI team programmatically trigger drop event.

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
});

The simulate function is defined in jquery.simulate.js. In simple words, it moves the draggable onto the droppable to trigger the drop event.

Putting this altogether, we have the following snippet. Cheers.

$(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>

这篇关于以编程方式将元素拖放到另一个元素上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！