jQuery UI dropping issue

Question

I have developed nested drag drop using jQuery UI but it does not allow me to drop outside .drop-container div. Here is the code snippet and JSFIDDLE to review:

$(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

Once I drag item and drop it into the #list2 dive,it is not working. How can I solve it?

Answer 1

When you're executing the 'sortable' function on your #list2 .drop-container, you're connecting it with #list1 which doesn't seem to exist.

Try to connect it with #list2, you should be able to drop your elements outside of the .drop-container div, and in the list2 div.

Moreover, you're repeating the connectWith: '#list1' instruction when executing the 'sortable' function on #list2. You can remove this connection.

Hope this will help !