jQuery UI sortable divs across multiple containers or parents

问题

I have a list of objects that is split into two containers that I want to make sortable via jQuery but I cannot figure out how to make one object able to be added to the other containers list and vice versa. So, I want to be able to drag an object from one container into the other and have the code treat it as if it were one list.

Here is my code below:

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui/js/jquery-ui-1.8.22.custom.min.js"</script>
<link type="text/css" href="jquery-ui/css/smoothness/jquery-ui-1.8.22.custom.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function(){
$("#nowplaying_list, #nowplaying_history").sortable().disableSelection();
});
</script>
</head>
<body>
<div id="left_content" class="ui-droppable">
<div id="nowplaying_container" style="display:block;">
    <div id="nowplaying_wrapper">
        <div id="nowplaying_history" class="ui-sortable">
            <div class="object_container ui-draggable" >OBJECT 1</div>
            <div class="object_container ui-draggable" >OBJECT 2</div>
            <div class="object_container ui-draggable" >OBJECT 3</div>
        </div>
        <div id="nowplaying_list" class="ui-sortable">
            <div class="object_container ui-draggable" >OBJECT 4</div>
            <div class="object_container ui-draggable" >OBJECT 5</div>
            <div class="object_container ui-draggable" >OBJECT 6</div>
        </div>
    </div>
</div>
</div>
</body>
</html>

回答1:

Take a look at the Sortable Portlets example, it appears to have the behavior you want.

The key is the connectWith option, which you could use once you assign a common class to both containers:

$(".now-playing-block").sortable({
    connectWith: '.now-playing-block'
});

(I left out the chained .disableSelection() call for clarity.)

来源：https://stackoverflow.com/questions/14574274/jquery-ui-sortable-divs-across-multiple-containers-or-parents

标签

jquery

jquery-ui

containers

jquery-ui-sortable