Home/ Questions/Q 3969616
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T03:59:05+00:00

I want to be able to repeatedly drag and drop the same source element.

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0