使用 jQuery UI，是否可以使用 JavaScript 执行拖放操作？
Example http://jsfiddle.net/KFRu9/。单击链接后，将#pony并将其放入#box。我尝试过触发拖动事件，但这似乎不起作用:)
$('#pony').trigger('drag', [$('#box')]);
这就是 jQuery UI 团队以编程方式触发的方式drop event.
droppable_events.js https://github.com/jquery/jquery-ui/blob/1-11-stable/tests/unit/droppable/droppable_events.js#L21-L33:
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函数定义在jquery.simulate.js https://github.com/jquery/jquery-ui/blob/1-11-stable/external/jquery-simulate/jquery.simulate.js。简而言之，它将可拖动对象移动到可放置对象上以触发drop event.
总而言之，我们有以下片段。干杯。
$(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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
