jquery 可拖动/可放下的更改快照
jquery draggable / droppable change snap
我正在尝试创建一系列 drag/droppable div。
删除 div1 后,我将创建一个新的 div 并将其捕捉到新位置。
然而,当 div1 被放下并且 div2 被拖动时,对齐位置保持不变:
( http://jsfiddle.net/kLpgukkj/2/ )
var trackID = "path0";
var trackType = "a";
$('.map-track-box').droppable({
tolerance: 'touch',
drop: function(event,ui){
// RETURNS HOME
$('#trackDragger').animate({ top: '30px', left: '20px' },500);
}
});
$('#'+trackID).droppable({
tolerance: 'touch',
drop: function(event,ui){
// IN POSITION
var pos = $('#'+trackID).position();
$('#trackDragger').animate({ top: pos.top, left: pos.left },500,function() {
$('#draggerBox').append("<div class='"+trackType+"' style='z-index:10;position:absolute;top:"+pos.top+"px;left:"+pos.left+"px;'></div>");
$('#trackDragger').css({ top: '30px', left: '20px' },500);
$('#trackDragger').attr('class', 'd');
$('#'+trackID).removeClass('ui-droppable'); // I attempted to remove the added class, and add it to the new element, but without luck
if(trackID=="path0") {
trackID = "path1";
}else if(trackID=="path1") {
trackID = "path2";
trackType = "d";
}else if(trackID=="path2") {
trackID = "path3";
trackType = "e";
}
$('#'+trackID).addClass('ui-droppable');
});
}
});
$('#trackDragger').draggable({
revert: 'invalid',
start: function(event,ui) {
$('#trackDragger').attr('class', trackType);
},
snap: "#"+trackID, // This keeps snapping to initial div (path0) even though trackID is being changed to path1,path2 etc
snapMode: "inner",
stop: function(){
var dragPos = $('#trackDragger').position();
if(dragPos.left < 101 && dragPos.top < 91) {
$('#trackDragger').attr('class', 'd');
}
//$(this).draggable('option','revert','invalid');
}
});
以上效果很好,但被拖动的元素一直吸附到 path0(初始可拖动 div)。
无论如何强制一个新的捕捉位置?
谢谢
至于您提到的fiddle,您只将droppable
事件绑定到一个元素。即
$('#'+trackID) // Your variable don't change from "path0" to any other.
据我了解,您希望其他黑盒也绑定可投放事件。
只需将 droppable
部分的代码更改为以下内容即可。
$('.path').droppable({});
这会将事件绑定到页面中的每个 .path
元素。
查看更新后的 fiddle here。
我发现添加:
$('#trackDragger').draggable("option", "snap", "#"+trackID);
将强制它捕捉到新元素。
此外使用
$('#'+trackID).droppable()...
会失败,因为它显然需要重新初始化才能使用不同的元素作为可放置元素。
我正在尝试创建一系列 drag/droppable div。 删除 div1 后,我将创建一个新的 div 并将其捕捉到新位置。 然而,当 div1 被放下并且 div2 被拖动时,对齐位置保持不变: ( http://jsfiddle.net/kLpgukkj/2/ )
var trackID = "path0";
var trackType = "a";
$('.map-track-box').droppable({
tolerance: 'touch',
drop: function(event,ui){
// RETURNS HOME
$('#trackDragger').animate({ top: '30px', left: '20px' },500);
}
});
$('#'+trackID).droppable({
tolerance: 'touch',
drop: function(event,ui){
// IN POSITION
var pos = $('#'+trackID).position();
$('#trackDragger').animate({ top: pos.top, left: pos.left },500,function() {
$('#draggerBox').append("<div class='"+trackType+"' style='z-index:10;position:absolute;top:"+pos.top+"px;left:"+pos.left+"px;'></div>");
$('#trackDragger').css({ top: '30px', left: '20px' },500);
$('#trackDragger').attr('class', 'd');
$('#'+trackID).removeClass('ui-droppable'); // I attempted to remove the added class, and add it to the new element, but without luck
if(trackID=="path0") {
trackID = "path1";
}else if(trackID=="path1") {
trackID = "path2";
trackType = "d";
}else if(trackID=="path2") {
trackID = "path3";
trackType = "e";
}
$('#'+trackID).addClass('ui-droppable');
});
}
});
$('#trackDragger').draggable({
revert: 'invalid',
start: function(event,ui) {
$('#trackDragger').attr('class', trackType);
},
snap: "#"+trackID, // This keeps snapping to initial div (path0) even though trackID is being changed to path1,path2 etc
snapMode: "inner",
stop: function(){
var dragPos = $('#trackDragger').position();
if(dragPos.left < 101 && dragPos.top < 91) {
$('#trackDragger').attr('class', 'd');
}
//$(this).draggable('option','revert','invalid');
}
});
以上效果很好,但被拖动的元素一直吸附到 path0(初始可拖动 div)。 无论如何强制一个新的捕捉位置?
谢谢
至于您提到的fiddle,您只将droppable
事件绑定到一个元素。即
$('#'+trackID) // Your variable don't change from "path0" to any other.
据我了解,您希望其他黑盒也绑定可投放事件。
只需将 droppable
部分的代码更改为以下内容即可。
$('.path').droppable({});
这会将事件绑定到页面中的每个 .path
元素。
查看更新后的 fiddle here。
我发现添加:
$('#trackDragger').draggable("option", "snap", "#"+trackID);
将强制它捕捉到新元素。 此外使用
$('#'+trackID).droppable()...
会失败,因为它显然需要重新初始化才能使用不同的元素作为可放置元素。