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>