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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在一个页面中动态放置多个Droppable来接受不同的Draggable相关的知识,希望对你有一定的参考价值。

参考技术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();
            }   

以上是关于如何在一个页面中动态放置多个Droppable来接受不同的Draggable的主要内容,如果未能解决你的问题,请参考以下文章

Droppable 不适用于克隆元素

如何在 jQuery UI 中使用 Draggable 和 Droppable 将拖动的 li 添加到可放置的 ui 中?

使用 jquery-ui droppable 时,如何从 droppable 区域中删除已经删除的项目?

如何取消 jQuery droppable 的放置动作?

jQuery UI Droppable:如何让它活起来?

为 jQuery UI Droppable 的相交容差构建匹配选项