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

Posted

技术标签:

【中文标题】删除元素后如何从元素中删除“可拖动”属性?【英文标题】: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);
      



);
);

【问题讨论】:

【参考方案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

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

【讨论】:

以上是关于删除元素后如何从元素中删除“可拖动”属性?的主要内容,如果未能解决你的问题,请参考以下文章

使用 JQuery 在 Droppend 时停止删除可拖动元素

jquery draggable - 删除拖动元素

在“停止”事件期间如何定位克隆的可拖动元素?

隐藏在容器外的可拖动元素

如何将可拖动的元素放入可排序的元素中,放置的项目不是原始元素而是自定义助手

拖动子元素时触发 Svelte 可拖动,onleave 事件