Take the 2-minute tour ×

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 attibute (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:

  <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>
    var copy = 0;
    var dragOptions = {
      helper: 'clone',
      cursor: 'hand',
      revert: 'invalid'
    $(document).ready(function () {
      $("ul#bag > li").droppable({
        drop: function (event, ui) {
          var clone = $(ui.draggable).clone().attr("id", "img_" + copy);
          clone.css("left", 0).css("top", 0);
  <style type="text/css">
      position: relative;
      float: left;

      cursor: move;

    div, li
      display: block;
      width: 160px; 
      height: 123px;
      margin: 2px;
      border: solid 1px gray

      clear: both;

  <ul id="bag">

  <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>

  <div class="clear" id="dustbin" style="background-color:Black;"></div>
share|improve this question

3 Answers 3

up vote 4 down vote accepted

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.

share|improve this answer
Thanks for figuring out a solution. –  Couto Feb 20 '11 at 21:57
This changed nothing for me, indeed some simple testing shows that the destroy method is never called on drop. –  Dave Sag Nov 14 '12 at 7:41

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...


This re-enables the draggable state to the element.

share|improve this answer
Why would you not just add $(draggable).draggable(); inside your drop? This works the exact same as your solution but with a few less lines. –  o_O Dec 10 '12 at 19:51

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.remove = function() {
    if(!this.element.data('draggable')) return;
            + " ui-draggable-dragging"
            + " ui-draggable-disabled");

    return this;
share|improve this answer

Your Answer


