Drag & Drop entre dos divs con jQueryUI

utopiko · #1 (**permalink**) 16/05/2012, 08:21

Buenas os cuento mi problema, quiero pasar elementos entre dos divs. En un principio con 5 elementos en el primer div y quiero que se puedan pasar a un segundo div mediante drag&drop y que una vez traspasado a ese segundo div se pueda devolver al primera de nuevo mediante drag&drop. El problema que se me crea es que quiero que se ordenen cuando se efectuen esas operaciones y eso no se como hacerlo. Mi codigo es el siguiente:

Código Javascript:

Ver original<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Draggable + Sortable</title>
    <link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
    <script src="http://jqueryui.com/jquery-1.7.2.js"></script>
    <script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
    <script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
    <script src="http://jqueryui.com/ui/jquery.ui.mouse.js"></script>
    <script src="http://jqueryui.com/ui/jquery.ui.draggable.js"></script>
    <script src="http://jqueryui.com/ui/jquery.ui.droppable.js"></script>
    <script src="http://jqueryui.com/ui/jquery.ui.sortable.js"></script>
    <link rel="stylesheet" href="http://jqueryui.com/demos.css">
    <style>
    .demo ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
    .demo li { margin: 5px; padding: 5px; width: 150px; }
    </style>
    <script>
    
    $(function() {
 
        $( "#sortable" ).sortable({
            revert: true
        });
    
    $( ".draggable" ).draggable({ 
        revert: "invalid",
        connectToSortable: "#sortable"
    });
 
    $( ".droppable" ).droppable({
    
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
        drop: function( event, ui ) {
 
            var targetElem = $(this).attr("id");
 
            $( this )
                .addClass( "dropped" )
                .find( "p" );
 
        }
    });
    
    });
    </script>
</head>
<body>
 
<div class="demo">
    
<div id="draggable" class="droppable" style="height:300px;width:150px;border:1px solid black;">
    <li class="ui-state-highlight draggable" style="list-style: none">Item 1</li>
    <li class="ui-state-highlight draggable" style="list-style: none">Item 2</li>
    <li class="ui-state-highlight draggable" style="list-style: none">Item 3</li>
    <li class="ui-state-highlight draggable" style="list-style: none">Item 4</li>
    <li class="ui-state-highlight draggable" style="list-style: none">Item 5</li>
</div>
 
<div id="sortable" class="droppable" style="height:300px;width:150px;border:1px solid black;">
 
</div>
 
</div><!-- End demo -->
</body>
</html>