如何仅使用 Draggable 和 Droppable jQuery 从克隆中删除类？

Posted 2023-05-08

【中文标题】如何仅使用 Draggable 和 Droppable jQuery 从克隆中删除类？

【英文标题】：How to remove a class from a clone only with Draggable and Droppable jQuery?

【发布时间】：2018-04-05 19:04:16

【问题描述】：

我目前正在尝试从可拖动的 li 内的嵌套 div 中删除一个类。我正在尝试的选项也是从原始 li 中删除该类。有人有什么见解吗？

jQuery

        $(function () 
            $(".drag li").each(function () 
                $(this).draggable(
                    cursor: "move",
                    revert: "invalid",
                    helper: "clone"                        
                );
            );     
        //Droppable function
        $(".droppable").droppable(
            activeClass: "ui-state-hover",
            hoverClass: "ui-state-active",
            accept: ":not(.ui-sortable-helper)",
            drop: function (event, ui) 
                var targetElem = $(this).attr("id");
                $(ui.draggable).clone().appendTo(this).addClass("form-btn-wide");
                $("#test .elementHidden").removeClass("elementHidden");
            

            //Sorting function
        ).sortable(
            items: "li:not(.placeholder)",
            sort: function () 
                $(this).removeClass("ui-state-default");
            ,
            over: function () 
                removeIntent = false;
            , //Remove function
            out: function () 
                removeIntent = true;
            ,
            beforeStop: function (event, ui) 
                if (removeIntent == true) 
                    ui.item.remove();
                
            

            )         
        );

你可以看到 $("#test .elementHidden").removeClass("elementHidden");是我尝试过的，但无济于事。

这是我试图从中删除“.elementHidden”类的示例：

<ol id="twocol" class= "drag">
 <li id="test" class="btn form-btn draggable"><span><i class="fa fa-fw fa-header"></i> Header</span>
 <div class="elementHidden"><input type="button" id="reset" class="btn btn-default" value="Cancel"></div>
</li>
</ol>

【问题讨论】：

欢迎来到 Stack Overflow。我认为问题在于，当您运行.clone() 时，它还会克隆所有属性，包括id。因此，您有 2 个具有相同 id 的 ekements，并且选择器可能对此有问题。

【参考方案1】：

提供更完整的示例可能有助于更快地获得答案。

工作示例：https://jsfiddle.net/Twisty/gyy2kqqz/

JavaScript

$(function() 
  $(".drag li").draggable(
    cursor: "move",
    revert: "invalid",
    helper: "clone"
  );
  //Droppable function
  $(".droppable").droppable(
    activeClass: "ui-state-hover",
    hoverClass: "ui-state-active",
    accept: ":not(.ui-sortable-helper)",
    drop: function(event, ui) 
        var dropId = ui.draggable.attr("id");
        var targetCount = $(this).find("[id*='clone']").length;
        var $dropElemClone = ui.draggable.clone();
        $dropElemClone
          .attr("id", dropId + "-clone-" + (targetCount + 1))
          .appendTo(this)
          .addClass("form-btn-wide")
          .find(".elementHidden")
          .removeClass("elementHidden");
      
      //Sorting function
  ).sortable(
    items: "li:not(.placeholder)",
    sort: function() 
      $(this).removeClass("ui-state-default");
    ,
    over: function() 
      removeIntent = false;
    , //Remove function
    out: function() 
      removeIntent = true;
    ,
    beforeStop: function(event, ui) 
      if (removeIntent == true) 
        ui.item.remove();
      
    
  )
);

您不需要使用.each()；只需使用正确的选择器，.draggable() 将应用于选择器中的所有元素。

有时使用克隆是一把双刃剑。你可以快速克隆一个元素，但你克隆了所有元素。因此，在将其附加回来之前，您可能需要确保它具有唯一的 id 属性。

将克隆存储到变量中通常是一种很好的做法。这使得以后的工作更容易。

最后，要删除类，我们需要首先选择具有该类的元素。使用.find() 是最简单的方法。我们希望它是这个克隆的一个元素，我们找到它，然后可以删除该类。

【讨论】：

这太好了，非常感谢！非常感谢您花时间解释这一切，这对我有很大帮助。