问题下降后，jquery draggable元素不再可拖动

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

在拖动图像的那一刻，它被成功克隆 - 即原始图像保持不变并且克隆很好地落入其新位置，但旧图像不再可拖动。检查元素显示 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>

7747

2018-02-16 18:44

起源

答案:

因此，似乎拖动项目后，可拖动窗口小部件会调用自己的destroy（）函数，该函数会从元素中删除任何可拖动性。

没有明显的方法可以用选项或事件来覆盖它，我已经在document.ready中用暴力来覆盖它了：

$ .ui.draggable.prototype.destroy = function（ul，item）{};

这现在有效。

2018-02-17 09:23

感谢您找到解决方案。 - Couto

这对我没有任何改变，实际上一些简单的测试表明，destroy方法永远不会被调用。 - Dave Sag

答案:

因此，似乎拖动项目后，可拖动窗口小部件会调用自己的destroy（）函数，该函数会从元素中删除任何可拖动性。

没有明显的方法可以用选项或事件来覆盖它，我已经在document.ready中用暴力来覆盖它了：

$ .ui.draggable.prototype.destroy = function（ul，item）{};

这现在有效。

2018-02-17 09:23

感谢您找到解决方案。 - Couto

这对我没有任何改变，实际上一些简单的测试表明，destroy方法永远不会被调用。 - Dave Sag

我知道这是旧的，但想为那些需要保留的人提供另一种解决方案 .destroy 并希望保持同名。

我做了一个功能来应用 draggable 陈述一个元素......

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

然后在里面 drop 的财产 .droppable 元素我只是......

MakeDraggable(ui.draggable);

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

2017-07-21 23:06

你为什么不加上$（draggable）.draggable（）;在你的内心？这与您的解决方案完全相同，但行数较少。 - o_O

感谢您找到解决方案。但是我确实需要使用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;
};

2018-02-20 22:04

问题 下降后，jquery draggable元素不再可拖动

答案:

答案:

热门问题

问题下降后，jquery draggable元素不再可拖动