提前感谢您看一下!我无法模拟阻力和阻力。 jQuery UI通过扩展插件提供的drop功能:
https://github.com/j-ulrich/jquery-simulate-ext/blob/master/doc/drag-n-drop.md
该文档使用我修改的以下内容来满足我的需求:
$('#draggableDiv').simulate("drag", {dragTarget: otherDiv});
Changed to this:
$('#placeme').simulate("drag", {dragTarget: $("#page1")});
我的警告信息永远不会弹出,因此很明显drop函数永远不会被触发,我不知道为什么。手动将对象拖动到page1会正常运行。
的jsfiddle: http://jsfiddle.net/d2fdvxhz/8/
HTML:
<div class="container">
<div id="view-port">
<div id="placeme" class="droppableShape">
<img src="https://upload.wikimedia.org/wikipedia/en/6/6f/Smiley_Face.png" width="25" height="25" />
</div>
<button id="testme">Simulate Drop</button>
<div class="page" id="page1" style="background-image: url(http://images.huffingtonpost.com/2012-08-15-1CanvasPanelInstall5psd.jpg);"></div>
<!-- Pages Here -->
</div>
</div>
JS:
$(document).ready(function(){
$(".droppableShape").draggable({
helper:'clone'
});
$(".page").droppable({
accept: ".droppableShape",
tolerance: 'fit',
drop: function(event,ui){
alert("Drop Detected");
var new_field = $(ui.helper).clone().removeClass('droppableShape');
var droppable_page = $(this);
var droppableOffset = $(this).offset();
new_field.css('top', ui.position.top - droppableOffset.top);
new_field.css('left', ui.position.left - droppableOffset.left);
// Set Draggable Options
new_field.draggable({
containment: droppable_page,
stop: function(event, ui) {
// Save position after dragging stops
$(this).data("x_cord", ui.position.left);
$(this).data("y_cord", ui.position.top);
$(this).draggable( "disable" );
}
});
// Add to drop area
$(this).append(new_field);
}
});
$( "#testme" ).click(function() {
$('#placeme').simulate("drag", {
dragTarget: $("#page1")
});
console.log("Simulate Attempted");
});
});