[英]jQuery Drag & Drop Simulate Plugin
預先感謝您查看此內容:我無法通過此處的擴展插件模擬 jQuery UI 提供的拖放功能:
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 function 從未被觸發,我不確定為什么。 手動將 object 拖到 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>
記者:
$(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");
});
});
我無法評論之前的帖子,所以我在這里粘貼了最新版本的代碼(腳本文件夾發生了變化,所以我更新了它們,我也將斷開的鏈接更改為圖像):
$(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-n-drop", {
dragTarget: $("#page1")
});
console.log("Simulate Attempted");
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.