logo标签列表

jQuery UI 拖放问题

jquerycssjquery-ui
6
我已经使用jQuery UI开发了嵌套拖放，但它不允许我将其拖到 .drop-container div 的外部。以下是代码片段和JSFIDDLE以供查看： 

$(function() {
    $("#list2 .drop-container").sortable({
        connectWith: "#list2 .drop-container",
        over: function() {
            removeIntent = false;
        },
        out: function() {
            removeIntent = true;
        },
        beforeStop: function(event, ui) {
            itemContext = ui.item.context;
            if (removeIntent == true) {
                ui.item.remove();
                disp($("#list2").sortable('toArray'));
            }
            //console.log(itemContext);

        },
        receive: function(event, ui) {
            console.log(ui);
            console.log(event);
            var this_id = $(ui.item).attr("id");
            var preview = $(itemContext).html().replace(/<!--/g, '').replace(/-->/g, '');

            $(itemContext).attr("id", this_id);
            $(itemContext).css("width", $('#list2').width() - 20).addClass("ui-state-default").height('auto');
            $(itemContext).html(preview);

            //console.log(this_id);
            //console.log(preview);

        }
    });
    $("#list2").sortable({
        connectWith: "#list2",
        over: function() {
            removeIntent = false;
        },
        out: function() {
            removeIntent = true;
        },
        beforeStop: function(event, ui) {
            itemContext = ui.item.context;
            if (removeIntent == true) {
                ui.item.remove();
                disp($("#list2").sortable('toArray'));
            }
            //console.log(itemContext);

        },
        receive: function(event, ui) {
            console.log(ui);
            console.log(event);
            var this_id = $(ui.item).attr("id");
            var preview = $(itemContext).html().replace(/<!--/g, '').replace(/-->/g, '');

            $(itemContext).attr("id", this_id);
            $(itemContext).css("width", $('#list2').width() - 20).addClass("ui-state-default").height('auto');
            $(itemContext).html(preview);

            $("#list2 .drop-container").sortable({
                connectWith: "#list2",
                over: function() {
                    removeIntent = false;
                },
                out: function() {
                    removeIntent = true;
                },
                beforeStop: function(event, ui) {
                    itemContext = ui.item.context;
                    if (removeIntent == true) {
                        ui.item.remove();
                        disp($("#list2").sortable('toArray'));
                    }
                    //console.log(itemContext);

                },
                receive: function(event, ui) {
                    console.log(ui);
                    console.log(event);
                    var this_id = $(ui.item).attr("id");
                    var preview = $(itemContext).html().replace(/<!--/g, '').replace(/-->/g, '');

                    $(itemContext).attr("id", this_id);
                    $(itemContext).css("width", $('#list2').width() - 20).addClass("ui-state-default").height('auto');
                    $(itemContext).html(preview);

                    //console.log(this_id);
                    //console.log(preview);

                }
            }); //.disableSelection()



            //console.log(this_id);
            //console.log(preview);

        }
    }); //.disableSelection()


    $("#list2").bind("sortupdate", function(event, ui) {
        //console.log($('#list2'));
        var result = $('#list2').sortable('toArray');
        var str = '';
        for (var i = 0; i < result.length; i++) {
            str += result[i] + "|";
            var tmp = "#" + result[i] + " .drop-container";
            if ($(tmp).length > 0) {
                $(tmp).each(function() {
                    if ($(this).children("li").length) {
                        str += $(this).parent()[0].id + "|";
                        $(this).children("li").each(function() {
                            str += this.id + "|";

                        })
                    }
                })
            }
        } //console.log(result);
        alert(str);
    });

    function disp(list) {
        var a = [];
        for (var i = 0; i < list.length; i++) {
            a.push(list[i]);
        }
        $('input').val(a.join('|'));
    }
});
#list1,
#list2,
#list3 {
    list-style-type: none;
    margin: 0;
    padding: 0 0 0;
    float: left;
    background-color: #CED1D6;
}
#list2 li {
    margin: 0px 0px 1px 0px;
    padding: 2px 0 2px 2px;
    width: 395px;
    cursor: move;
}
#list1 li {
    margin: 0px 0px 1px 0px;
    padding: 2px 0 2px 2px;
    cursor: move;
}
#list2 li {
    margin: 5px 5px 0 5px;
    padding: 3px 3px 3px 3px;
    width: 595px;
    cursor: move;
    display: inline-block;
    vertical-align: middle;
}
#list2 li {
    margin: 0px 0px 1px 0px;
    padding: 2px 0 2px 2px;
    width: 595px;
    cursor: move;
    line-height: 23px;
}
#list2 ul.drop-container {
    padding-left: 0px;
    border: 1px solid #A9A9A9;
    background: #D3D3D3;
    min-height: 100px;
}
#list2 ul.drop-container li {
    width: 575px;
}
#list2 > li span.lspan {
    padding: 5px;
    float: left;
}
.layout_panels {
    padding-left: 10px
}
.layout_panels li {
    padding-left: 10px;
    width: 580px;
}
.widerbox {
    width: 970px;
}
.pancls {
    line-height: 35px;
    font-size: 14px;
}
#list2 ul.drop-container li {
    border: 1px solid #A9A9A9;
}
#list2 li span.tttip {
    text-overflow: ellipsis;
    width: 65%;
    overflow: hidden;
    white-space: nowrap;
}
#list2 li span.pull-left i {
    display: none
}
#list2 {
    padding-bottom: 20px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</script> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/black-tie/jquery-ui.css">
</script> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/ui-lightness/jquery-ui.css">
</script> 
<div class="workarea" style="border:1px solid green; width:60%; padding:0; margin:0 0 0 15px;float:left">
    <h3>Your List</h3>
    <ul id="list2" class="connectedSortable ui-sortable" style="width: 100%; min-height: 500px;">
        <li style="width: 500px;" class="ui-state-default ui-sortable-handle" id="997">
            5.jpg       
            <span class="pull-right">
                <div class="text-right hroffset">
                    <a data-toggle="modal" class="preview" ><i class="fa fa fa-eye fa-2x valignmid text-green"></i></a>
                    <a href="javascript:void(0)" class="deletemedia"><i class="fa fa-times fa-stack fa-inverse"></i></a>
                </div>
            </span>
        </li>
        <li style="width: 500px;" class="ui-state-default ui-sortable-handle" id="998">
            6.jpg       
            <span class="pull-right">
                <div class="text-right hroffset">
                    <a data-toggle="modal" class="preview"><i class="fa fa fa-eye fa-2x valignmid text-green"></i></a>
                    <a href="javascript:void(0)" class="deletemedia"><i class="fa fa-times fa-stack fa-inverse"></i></a>
                </div>
            </span>
        </li>
        <li class="ui-draggable ui-draggable-handle ui-state-default ui-sortable-handle" style="width: 500px; height: auto;" id="layoutdata_24_3">
            Layout4         
            <span class="pull-right">
                <div class="text-right">
                    <a href="javascript:void(0)" class="deletemedia"><i class="fa fa-times fa-stack fa-inverse"></i></a>
                </div>
            </span>
            <ul class="layout_panels" style="float:left">
                <li id="119" data-layout_id="24" style="width: 481px;">
                    <span class="pancls pull-left">Panel: New ( 1360  X 768 ) </span><span class="pull-right"></span>
                    <div class="clearfix"></div>
                    <ul class="drop-container ui-sortable" style="width: 478px;">
                        <li class="ui-draggable ui-draggable-handle ui-state-default" style="height: auto; width: 477px;" id="1121">
                            <span class="pull-left">1.jpg</span>
                            <span class="pull-right">
                                <div class="text-right hroffset">
                                    <a data-toggle="modal"class="preview"><i class="fa fa fa-eye fa-2x valignmid text-green"></i></a>
                                    <a href="javascript:void(0)" class="deletemedia"><i class="fa fa-times fa-stack fa-inverse"></i></a>
                                </div>
                            </span>
                        </li>
                        <li class="ui-draggable ui-draggable-handle ui-state-default" style="height: auto; width: 477px;" id="433">
                            <span class="pull-left">2.jpg</span>
                            <span class="pull-right">
                                <div class="text-right hroffset">
                                    <a data-toggle="modal" class="preview" ><i class="fa fa fa-eye fa-2x valignmid text-green"></i></a>
                                    <a href="javascript:void(0)" class="deletemedia"><i class="fa fa-times fa-stack fa-inverse"></i></a>
                                </div>
                            </span>
                        </li>
                        <li class="ui-draggable ui-draggable-handle ui-state-default" style="height: auto; width: 800px;" id="996" >
                            <span class="pull-left">4.jpg</span>
                            <span class="pull-right">
                                <div class="text-right hroffset">
                                    <a data-toggle="modal" class="preview" ><i class="fa fa fa-eye fa-2x valignmid text-green"></i></a>
                                    <a href="javascript:void(0)" class="deletemedia"><i class="fa fa-times fa-stack fa-inverse"></i></a>
                                </div>
                            </span>
                        </li>
                        <li class="ui-draggable ui-draggable-handle ui-state-default" style="height: auto; width: 800px;" id="995" >
                            <span class="pull-left">3.jpg</span>
                            <span class="pull-right">
                                <div class="text-right hroffset">
                                    <a data-toggle="modal" class="preview" ><i class="fa fa fa-eye fa-2x valignmid text-green"></i></a>
                                    <a href="javascript:void(0)" class="deletemedia"><i class="fa fa-times fa-stack fa-inverse"></i></a>
                                </div>
                            </span>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

JSFIDDLE

当我拖动项目并将其放入#list2区域时，它无法工作。如何解决？

2个回答
3
当你在#list2 .drop-container执行'sortable'函数时，你连接的是一个不存在的#list1。
尝试将其连接到#list2，你应该能够将元素放置在.drop-container div之外，在list2 div中。
此外，当在#list2上执行'sortable'函数时，重复了connectWith: '#list1'指令。你可以删除这个连接。
希望这能帮到你！
你确定吗？很抱歉，我没有看到任何修改。我已经更新了：http://jsfiddle.net/wsrbuef7/15/，然后你可以将“2.jpg”移动到“5.jpg”和“6.jpg”之间，例如？ - Lucas Delobelle
是的，我确定，甚至更改删除也不起作用。 - Bhumi Shah
0
正如Lucas所提到的，您在主要的
    元素中缺少id='list1'。通过添加它并将connectWith更改为list2，似乎可以正常工作。
    <ul id="#list1" class="layout_panels" style="float:left">
                    <li id="119" data-layout_id="24" style="width: 481px;">
     .
     .
     .

    这是一个工作示例：http://jsfiddle.net/wsrbuef7/17/
就像我之前所说的，list1不在那里了，有人改变了它。现在检查一下。 - Bhumi Shah
掉落速度有问题。如果快速掉落，它会回退。 - Bhumi Shah
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接