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

Question

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

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”class 的示例：

<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()；只需使用正确的 selector 并且 .draggable() 将应用于 selector.

中的所有元素

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

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

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

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

How to remove a class from a clone only with Draggable and Droppable jQuery?

jquery

jquery-ui

draggable