jQuery可拖动元素在放置后不再可拖动

Question

jQuery可拖动元素在放置后不再可拖动

11

我希望能够反复拖放相同的源元素。

目前，当一个图像被拖动时，它会成功地克隆——也就是原始图像位置不变，并且克隆出的图像可以很好地落到新的位置，但是原始图像却无法再次被拖动。检查元素时，显示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>

- jenson-button-event

3个回答

4

我知道这已经有点老了，但是我想为那些需要保留.destroy并且希望保持相同名称的人提供另一种解决方案。

我编写了一个函数来将draggable状态应用于一个元素...

function MakeDraggable(ele) {
    ele.draggable({ revert: "invalid" });
}

然后在 .droppable 元素的 drop 属性内，我只需...

MakeDraggable(ui.draggable);

这将重新启用元素的可拖动状态。

- Jared

2

为什么你不直接在drop函数里添加$(draggable).draggable();呢？这样做与你的解决方案完全相同，但代码行数更少。 - o_O

1

感谢您找到了解决方案。但是我确实需要destroy方法...因此，在使用了您的解决方案之后，我将本地的destroy方法分配给另一个方法...所以我们的解决方案将类似于这样;

$.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;
};

- Couto

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jenson-button-event · Accepted Answer

看起来，一旦拖动了该项，可拖动小部件将调用其自己的destroy()函数，从元素中删除任何可拖动性。

没有明显的方法可以通过选项或事件覆盖它，我已经在document.ready中强制覆盖了它：

$.ui.draggable.prototype.destroy = function (ul, item) { };

现在这个功能可以正常工作了。