删除元素后如何从元素中删除“可拖动”属性？答案

【问题标题】：How do you remove the "draggable" attribut from an element once it's been dropped?删除元素后如何从元素中删除“可拖动”属性？
【发布时间】：2021-09-18 11:09:19
【问题描述】：

大家晚上好。仍在处理我的 DnD 项目，DnD 的工作令人满意，但所有项目一旦被删除就保持可拖动状态。拖放后，我想删除可拖动属性。我该如何管理？顺便说一句，我已经在谷歌上搜索了几个小时。 TIA 代码如下...

$(function() {
  $(".tier").draggable({
    cursor: "grab",
    revert: true
  });

$(".target.droppable").droppable({
      accept: ".tier",
      tolerance: "pointer",
      drop: function(event, ui) {
        ui.draggable.attr("style", "margin: 0; border: 0;").appendTo(this);
        ui.draggable.attr("draggable", false);
        n = ui.draggable.attr("src");
        dr = ui.draggable.attr("draggable");
        console.log("Draggable:" + dr);
        // console.log("Image Filename:" + n);
        tn = n.substr(4, 1);
        // console.log("Tiernummer:" + tn);
        x = (this).cellIndex;
        // console.log("Dropped Index:" + x);
        index = $(this).closest("tr").index();
        console.log("Dropped tr:" + index);
        t = parseInt(tn, 10);
        (this).setAttribute("draggable", false);
                checkright(t, x);
      }



});
});

【问题讨论】：

标签： jquery jquery-ui drag-and-drop

【解决方案1】：

这是一个类，所以只需像ui.draggable.removeClass('draggable').removeClass('tier');这样删除类

$(".target.droppable").droppable({
      accept: ".tier",
      tolerance: "pointer",
      drop: function(event, ui) {
        ui.draggable.attr("style", "margin: 0; border: 0;").appendTo(this);
        ui.draggable.removeClass('draggable').removeClass('tier');
        ui.draggable.attr("draggable", false);
        n = ui.draggable.attr("src");
        dr = ui.draggable.attr("draggable");
        console.log("Draggable:" + dr);
        // console.log("Image Filename:" + n);
        tn = n.substr(4, 1);
        // console.log("Tiernummer:" + tn);
        x = (this).cellIndex;
        // console.log("Dropped Index:" + x);
        index = $(this).closest("tr").index();
        console.log("Dropped tr:" + index);
        t = parseInt(tn, 10);
        (this).setAttribute("draggable", false);
                checkright(t, x);
      }
});

【讨论】：

尊敬的@Kinglish 先生...我试过了，光标按原样改变了，但是当我长时间按住鼠标按钮时，我仍然可以拖动该项目。您还有其他有用的见解可能会有所帮助吗？不过还是感谢您的及时答复。
试试修改后的。我错过了您实际上是基于类 tier 设置可拖动对象，因此在更新的代码中也将其删除。
亲爱的@Kinglish 先生：成功了。非常感谢。

【解决方案2】：

考虑以下内容。

$(function() {
  $(".tier").draggable({
    cursor: "grab",
    revert: true
  });

  $(".target.droppable").droppable({
    accept: ".tier",
    tolerance: "pointer",
    drop: function(event, ui) {
      var dropped = ui.draggable.attr("style", "margin: 0; border: 0;").appendTo(this);
      dropped.draggable("destroy");
      n = dropped.attr("src");
      dr = dropped.attr("draggable");
      console.log("Draggable:" + dr);
      // console.log("Image Filename:" + n);
      tn = n.substr(4, 1);
      // console.log("Tiernummer:" + tn);
      x = $(this).index();
      // console.log("Dropped Index:" + x);
      index = $(this).closest("tr").index();
      console.log("Dropped tr:" + index);
      t = parseInt(tn, 10);
      $(this).attr("draggable", false);
      checkright(t, x);
    }
  });
});

最好对任何 jQuery UI 对象使用destroy。查看更多：https://api.jqueryui.com/draggable/#method-destroy

完全删除可拖动功能。这会将元素返回到其初始化前的状态。

【讨论】：