将 class 添加到 jQuery 可拖放的可放置项目

Question

我正在尝试将 class 的 "collapse" 添加到特定的 div 中，当项目被放入可放置区域时。我已经成功地从可投放项目中删除 class，但添加一个是在暗示我。有人可以帮忙吗？

jQuery

    $(function () {
        var removeIntent;
        $(".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();
                }
            }
        })
    });

可丢弃HTML

<div class="createForm droppable">
<div class="col-md-12 text-center">
    <p>Onboarding glory aways you, %User.Name%. Go forth and automate.<br /></p>
    <div class="panel panel-default col-md-offset-2 col-md-8">
        <div class="panel-body">
            <p>How do you want to trigger this<br />  onboarding sequence?</p>
            <input type="button" class="btn btn-sm btn-primary" value="Set enrollment" />
        </div>
    </div>
</div>
<div class="col-md-offset-5 col-md-2 text-center">
    <i class="fa fa-2x fa-arrow-down" aria-hidden="true"></i>
</div>

可拖动HTML

<ol id="two-col" class="drag">
<li class="btn form-btn draggable">
    <div id="cardtitle" class="cardtitle">
        <div>
            <i class="fa fa-check-circle fa-3x text-primary"></i>
        </div>
        <div class="row m-t-md">
            <p class="text-primary text-center"><strong>Complete<br /> Vendor Profile</strong></p>
        </div>
    </div>
    <div class="panel panel-default col-md-offset-2 col-md-8 elementHidden text-center">
        <div class="panel-body">
            <div>
                <i class="fa fa-check-circle fa-3x text-primary"></i>
            </div>
            <div class="row m-t-md">
                <p class="text-primary text-center"><strong>Complete Vendor Profile</strong></p>
            </div>
        </div>
    </div>
    <div class="col-md-offset-5 col-md-2 text-center elementHidden">
        <i class="fa fa-2x fa-arrow-down" aria-hidden="true"></i>
    </div>
</li>
</ol>

我试过调用 cardtitle id 和 class 来添加 class 崩溃，但没有成功。有人有什么想法吗？

Answer 1

我能够通过添加以下行项目使其正常工作：

$("#undefined-clone-" + (targetCount + 1)).find('.cardtitle').hide();

掉落

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");
                $("#undefined-clone-" + (targetCount + 1)).find('.cardtitle').hide();
            }

将 class 添加到 jQuery 可拖放的可放置项目

Adding a class to a droppable item within jQuery draggable and droppable

javascript

jquery

jquery-ui

jquery-ui-draggable