Menu
I want to be able to repeatedly drag and drop the same source element.
At the moment when an image is dragged, it is cloned successfully - that is the original image stays put and the clone drops nicely into its new place, but the old image is no longer draggable. Inspecting the element shows class as an attribute (no value) i.e. not class="ui-draggable"
As you'll see I've tried to re-enable draggability onto the original after the cloning, but its not working.
Here's the code:
<!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>
569
So, it appears that once the item is dragged, the draggable widget calls its own destroy() function which removes any semblance of draggability from the element.
With no discernible way of overriding this with options or events, I've overridden it with brute force in document.ready:
$.ui.draggable.prototype.destroy = function (ul, item) { };
This now works.
77
I know this is old, but wanted to provide another solution to those that need to keep the .destroy and would like to keep it the same name.
I made a function to apply the draggable state to an element...
function MakeDraggable(ele) {
ele.draggable({ revert: "invalid" });
}
Then inside of the drop property of the .droppable elements I simply...
MakeDraggable(ui.draggable);
This re-enables the draggable state to the element.
37
Thanks for figuring out a solution. However i really needed the destroy method... so after using your solution, i assigned the native destroy method to another method... so your solution with mine would be something like this;
$.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;
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
