如何在一个页面中动态放置多个Droppable来接受不同的Draggable

Posted 2023-05-08

参考技术A <script>
$(function()
// 初始化#draggable 可以被拖动
$( "#draggable" ).draggable();
// 初始化，有东西拖到#droppable时，弹出alert窗口
$( "#droppable" ).droppable(
drop: function( event, ui )
alert("has drop!--from ifxoxo.com");

);
);
</script> 参考技术B 解决了吗？我现在也想要这样的效果

将类添加到jQuery draggable和droppable中的可放置项

当项目被放入可放置区域时，我正在尝试向特定div添加一类“崩溃”。我已经成功地从一个可放置的项目中删除了一个类，但添加一个类是暗示我的。有人可以帮忙吗？

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来添加崩溃类，但没有任何运气。有没有人有任何想法？

答案

通过添加以下订单项，我能够让它工作：

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