[英]how to make a div draggable and droppable
One thing left in my project was to make the two divs draggable and droppable simultaneously. 我项目中剩下的一件事就是让两个div可以同时拖拽和拖放。 Now I have the working code of divs that can be dragged and dropped but for example I can drag a div from target area and drop it on users area but I cant seem to figure out a way to drag those divs from users and assign to different users.
现在我有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);
}
});
});
http://jsfiddle.net/coder880/TpbZk/31/ http://jsfiddle.net/coder880/TpbZk/31/
The issue is because once the item is dragged/dropped it is then cloned. 问题是因为一旦项目被拖放,就会克隆它。 This clone does not have the
draggable()
plugin instantiated on it. 此克隆没有在其上实例化
draggable()
插件。 You need to call draggable()
on the $item
again. 你需要再次调用
$item
上的draggable()
。 Try this: 试试这个:
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);
}
});
it should only be cloned when its from target otherwise it should move it.
它只应该从目标克隆,否则它应该移动它。
To achieve this you need to remove the helper: 'clone'
option in the cloned draggable element and maintain a flag on the element to determine whether it is a brand new clone or has been dragged previously and moved again. 要实现此目的,您需要删除克隆的draggable元素中的
helper: 'clone'
选项,并在元素上保留一个标志,以确定它是否是全新的克隆,或者之前是否已被拖动并再次移动。 To do this you could use a class, something like this: 要做到这一点,你可以使用类,如下所示:
$(".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);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.