我要做的是交换不同div
元素中的元素。这是我的代码:JSfiddle
每个div
只能有一个被删除的元素。如果drop_
div已删除元素并且droppable元素从#tire_deck
中删除,则必须拒绝该元素。如果元素从其他div
中删除,则必须进行交换。任何人都可以帮我实现这个目标吗?
答案 0 :(得分:2)
我采取的方式是在拖动开始时存储可拖动的父母,然后用它来确定我交换孩子或停止事情。
这是小提琴:
和javascript:
$(function () {
var origin;
$(".tire").draggable({
appendTo: "body",
cursor: "move",
helper: 'clone',
revert: "invalid",
start: function (event, ui) {
origin = event.target.parentNode;
}
});
$("#tire_deck").droppable({
tolerance: "intersect",
accept: ".tire",
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function (event, ui) {
$("#tire_deck").append($(ui.draggable));
}
});
$(".drop_1, .drop_2, .drop_3, .drop_4, .drop_5, .drop_6").droppable({
tolerance: "intersect",
accept: ".tire",
drop: function (event, ui) {
if (this.children.length == 0) {
$(this).append($(ui.draggable));
} else {
if (origin.id !== "tire_deck") {
event.stopPropagation();
var copyNode = $(this).children().detach();
$(this).append($(ui.draggable));
$(origin).append(copyNode);
} else {
alert("Stopped!");
}
}
}
});
});
答案 1 :(得分:0)
我想出了如何实现我想要的结果:JSFiddle,也许这对某些人有用。
在可拖动事件中,我添加start
事件以获取其原始父ID:
var parent_div_data;
$(".tire").draggable({
appendTo: "body",
cursor: "move",
helper: 'clone',
revert: "invalid",
start: function( event, ui ) {
parent_div_data = $(this).parent().attr("id");
}
});
然后在droppable drop
事件中,我检查了它有多少可拖动元素,并将第一个元素附加到第二个元素的父div
if($(this).find(".tire").length == 1){
var first = $(this).find(':first-child');
$('#' + parent_div_data).append(first);
}