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();
                }
            }

            })         
        });

你可以看到$（＆＃34; #test .elementHidden＆＃34;）。removeClass（＆＃34; elementHidden＆＃34;）;是我尝试过的，但无济于事。

以下是我尝试删除＆＃39; .elementHidden＆＃39;的示例。来自：

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

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

1 个答案: