jquery可拖动元素不再拖放后可以拖动
问题描述:
我希望能够反复拖放同一个源元素。jquery可拖动元素不再拖放后可以拖动
当拖动图像时,它被克隆成功 - 即原始图像保持放置状态,并且克隆很好地落入其新位置,但旧图像不再可拖动。检查元素显示class
作为属性(没有值),即不是class="ui-draggable"
正如你会看到我试图重新启用克隆后可拖动到原来的,但它不工作。
下面的代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<title></title>
<script language="javascript" type="text/javascript">
var copy = 0;
var dragOptions = {
helper: 'clone',
cursor: 'hand',
revert: 'invalid'
};
$(document).ready(function() {
$("img").draggable(dragOptions);
$("ul#bag > li").droppable({
drop: function (event, ui) {
copy++;
var clone = $(ui.draggable).clone().attr("id", "img_" + copy);
$(this).append(clone);
clone.css("left", 0).css("top", 0);
$(ui.draggable).draggable(dragOptions);
}
});
});
</script>
<style type="text/css">
li
{
position: relative;
float: left;
}
img
{
cursor: move;
}
div, li
{
display: block;
width: 160px;
height: 123px;
margin: 2px;
border: solid 1px gray
}
.clear
{
clear: both;
}
</style>
</head>
<body>
<ul id="bag">
<li></li>
<li></li>
<li></li>
</ul>
<ul id="shop">
<li><img id="img1" src="images/p1.jpg" /></li>
<li><img id="img2" src="images/p2.jpg" /></li>
<li><img id="img3" src="images/p3.jpg" /></li>
</ul>
<div class="clear" id="dustbin" style="background-color:Black;"></div>
</body>
</html>
答
因此,它似乎一旦该项目被拖动,可拖动窗口小部件调用自身的破坏()函数将删除元素draggability的任何假象。
与期权或事件重写此的没有明显的办法,我已经与蛮力中的document.ready重写它:
$ .ui.draggable.prototype.destroy =功能(UL,项目){ };
现在可以工作。
答
感谢您找出解决方案。不过,我真的需要销毁方法...所以在使用你的解决方案后,我将本地销毁方法分配给另一种方法...所以你的解决方案将是这样的;
$.ui.draggable.prototype.destroy = function (ul, item) { };
$.ui.draggable.prototype.remove = function() {
if(!this.element.data('draggable')) return;
this.element
.removeData("draggable")
.unbind(".draggable")
.removeClass("ui-draggable"
+ " ui-draggable-dragging"
+ " ui-draggable-disabled");
this._mouseDestroy();
return this;
};
答
我知道这是旧的,但希望提供另一种解决方案,以那些需要保持.destroy
并想保持相同的名称。
我做出了draggable
状态适用于某个元素的功能...
function MakeDraggable(ele) {
ele.draggable({ revert: "invalid" });
}
然后.droppable
元素的drop
财产里面我只是...
MakeDraggable(ui.draggable);
这种再 - 使能元素的可拖动状态。
感谢您找出解决方案。 – Couto 2011-02-20 21:57:48
这对我来说没有任何改变,事实上一些简单的测试表明,destroy方法从来不会被放在drop上。 – 2012-11-14 07:41:02