我尝试将多对一拖放标记实现为jsfiddle.net/7683X/126/。实际上我从数据库中获取'.box'的值。
$(document).ready(function () {
galleryDragAndDrop("#test-container", "#gallery-one", "#gallery-two", "#gallery-three", ".box");
});
function galleryDragAndDrop(mainContainer, containerOne, containerTwo, containerThree, dragItem) {
$(dragItem).draggable(
{
containment: mainContainer,
helper: "clone",
cursor: "move",
drag: function (event, ui) {
$(ui.helper.prevObject).addClass("box_current");
},
stop: function (event, ui) {
$(ui.helper.prevObject).removeClass("box_current");
}
});
$(containerTwo).droppable({
accept: dragItem,
activeClass: "ui-state-highlight",
drop: function (event, ui) {
acceptBoxIngalleryTwo(ui.draggable);
}
});
$(containerOne).droppable({
accept:dragItem,
activeClass: "ui-state-highlight",
drop: function (event, ui) {
acceptBoxIngalleryOne(ui.draggable);
}
});
$(containerThree).droppable({
accept: dragItem,
activeClass: "ui-state-highlight",
drop: function (event, ui) {
acceptBoxIngalleryThree(ui.draggable);
}
});
function acceptBoxIngalleryTwo(item) {
$(item).fadeOut(function () {
$(containerTwo).append(item);
});
$(item).fadeIn();
$(item).removeClass("box_current");
}
function acceptBoxIngalleryOne(item) {
$(item).fadeOut(function () {
$(containerOne).append(item);
});
$(item).fadeIn();
$(item).removeClass("box_current");
}
function acceptBoxIngalleryThree(item) {
$(item).fadeOut(function () {
$(containerThree).append(item);
});
$(item).fadeIn();
$(item).removeClass("box_current");
}
}
我需要的是我有3个div作为gallery-one(source1),gallery-two(target),gallery-three(source2)。我将元素从source1和source2拖到目标。当我将这些元素从目标div拖回到源div时,它必须检查拖动的元素以前是从source1还是source2,这样source1不应该接受来自source2的标记等等。请帮忙!
提前致谢。