jquery可拖动元素在删除后不再可拖动_Jquery_Drag And Drop

jquery可拖动元素在删除后不再可拖动

jquery

jquery可拖动元素在删除后不再可拖动,jquery,drag-and-drop,Jquery,Drag And Drop,我希望能够反复拖放相同的源元素在拖动图像时，图像被成功克隆-即原始图像保持不变，克隆图像很好地放置到新位置，但旧图像不再可拖动。检查元素时，将class显示为属性（无值），即不class=“ui-draggable” 正如您将看到的，在克隆之后，我尝试重新启用对原始文件的可拖动性，但它不起作用代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/

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

在拖动图像时，图像被成功克隆-即原始图像保持不变，克隆图像很好地放置到新位置，但旧图像不再可拖动。检查元素时，将

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>


var-copy=0；
var dragOptions={
助手：“克隆”，
光标：'手'，
回复：“无效”
};
$（文档）.ready（函数（）{
$（“img”）.draggable（dragOptions）；
$（“ul#bag>li”）。可下拉({
drop：函数（事件、用户界面）{
复制++；
var clone=$（ui.draggable.clone（）.attr（“id”，“img”+copy）；
$（此）.append（克隆）；
clone.css（“左”，0）.css（“顶”，0）；
$（ui.draggable）.draggable（dragOptions）；
}
});
});
锂
{
位置：相对位置；
浮动：左；
}
img
{
光标：移动；
}
李志伟
{
显示：块；
宽度：160px；
高度：123px；
保证金：2倍；
边框：纯色1px灰色
}
清楚的
{
明确：两者皆有；
}

因此，一旦拖动项目，Dragable小部件将调用其自己的destroy（）函数，该函数将从元素中删除任何Dragable的外观

由于没有可识别的方法用选项或事件覆盖它，我在document.ready中用蛮力覆盖了它：

$.ui.draggable.prototype.destroy=函数（ul，item）{}

现在可以了。

谢谢你想出了一个解决方案。但是我真的需要销毁方法。。。所以在使用您的解决方案后，我将本机销毁方法指定给另一个方法。。。所以你和我的解决方案是这样的

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

我知道这很旧，但我想为那些需要保留

.destroy

并希望保留相同名称的人提供另一种解决方案

我做了一个函数，将

可拖动的

状态应用于元素

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

然后在

.droppable

元素的

drop

属性的内部，我只是

MakeDraggable(ui.draggable);

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

感谢您找到了解决方案。这对我来说没有任何改变，事实上，一些简单的测试表明destroy方法从未在drop上调用过。为什么不直接添加$（draggable）.draggable（）；在你的药水里？这与您的解决方案完全相同，但只需少几行。