我的项目还剩下一件事就是让两个div可以同时拖拽和拖放。现在我有div的工作代码可以拖放但是例如我可以从目标区域拖动div并将其放在用户区域但是我似乎无法想出一种方法来拖动用户的div并分配给不同的用户。
$(document).ready(function(){
$(".dragable").draggable({
cancel: "a.ui-icon",
revert: true,
helper: "clone",
cursor: "move",
revertDuration: 0
});
$('.droppable').droppable({
accept: ".dragable",
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
// clone item to retain in original "list"
var $item = ui.draggable.clone();
$(this).addClass('has-drop').append($item);
}
});
});
答案 0 :(得分:4)
问题是因为一旦项目被拖放,就会克隆它。此克隆没有实例化draggable()
插件。您需要再次致电draggable()
上的$item
。试试这个:
var draggableOptions = {
cancel: "a.ui-icon",
revert: true,
helper: "clone",
cursor: "move",
revertDuration: 0
}
$(".dragable").draggable(draggableOptions);
$('.droppable').droppable({
accept: ".dragable",
activeClass: "ui-state-highlight",
drop: function(event, ui) {
var $item = ui.draggable.clone();
$item.draggable(draggableOptions);
$(this).addClass('has-drop').append($item);
}
});
只有当它来自目标时才能克隆它,否则它应该移动它。
要实现此目的,您需要删除克隆的draggable元素中的helper: 'clone'
选项,并在元素上保留一个标志,以确定它是否是全新的克隆,或者之前是否已被拖动并再次移动。要做到这一点,你可以使用类,如下所示:
$(".dragable").draggable({
cancel: "a.ui-icon",
revert: true,
helper: "clone",
cursor: "move",
revertDuration: 0
});
$('.droppable').droppable({
accept: ".dragable",
activeClass: "ui-state-highlight",
drop: function(event, ui) {
var $item = $(ui.draggable)
if (!$item.hasClass('clone')) {
$item = $item.clone().addClass('clone');
$item.draggable({
cancel: "a.ui-icon",
revert: true,
cursor: "move",
revertDuration: 0
});
}
$(this).addClass('has-drop').append($item);
}
});