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

Question

我目前正在尝试从可拖动的 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>

Answer 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() 是最简单的方法。我们希望它是这个克隆的一个元素，我们找到它，然后可以删除该类。