example - jQuery Sortable y Dropable
sortable jquery ejemplos (6)
Aquí hay una versión simplificada de la solución de Colin.
La mayor diferencia es que esta solución no almacena el html completo de los elementos clasificables, sino solo el elemento arrastrado actualmente. A continuación, se inserta en su posición original si el elemento se suelta en el área desplegable.
De todos modos, aquí está el código:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var dropped = false;
var draggable_sibling;
$("#sortable").sortable({
start: function(event, ui) {
draggable_sibling = $(ui.item).prev();
},
stop: function(event, ui) {
if (dropped) {
if (draggable_sibling.length == 0)
$(''#sortable'').prepend(ui.item);
draggable_sibling.after(ui.item);
dropped = false;
}
}
});
$(".droppable").droppable({
activeClass: ''active'',
hoverClass:''hovered'',
drop:function(event,ui){
dropped = true;
$(event.target).addClass(''dropped'');
}
});
});
</script>
<style type="text/css">
#sortable li{
clear:both;
float:left;
}
.droppable {
clear:both;
height:300px;
width:400px;
background-color:#CCC;
}
.droppable.active { background: #CFC; }
.droppable.hovered { background: #CCF; }
.dropped { background: #f52; }
</style>
</head>
<body>
<ul id="sortable">
<li id="one">One</li>
<li id="two">Two</li>
<li id="three">Three</li>
<li id="four">Four</li>
<li id="five">Five</li>
<li id="six">Six</li>
</ul>
<div class="droppable">Drop Here</div>
<div class="droppable">Drop Here</div>
</body>
</html>
Todavía tiene el mismo problema que la solución de Colin si un elemento se arrastra a una nueva posición en la lista y luego se coloca fuera de <ul> y <div> . El elemento no se restablecerá, pero tomará la última posición en la lista (probado en Google Chrome). De todos modos, esto se resuelve fácilmente con un poco de mouse sobre la detección o incluso puede ser un comportamiento deseable.
Quiero tener una lista que se pueda ordenar, pero también quiero que los elementos de esa lista sean solubles en los divs que he definido como dropables. Parece que no puedo encontrar la manera de hacerlo. ¿Algunas ideas?
Fue capaz de obtener un resultado final similar al hacer que cada uno de los DIV objetivo sean sus propios sortables.
Luego, a través de connectWith, hice que todos los sortables fueran capaces de conectarse y compartir draggables.
Algo como:
var connects = ''#main_sortable, div.target'';
$(''#main_sortable'').sortable({ connectWith: connect });
$(''div'').sortable({ connectWith: connect} );
He pasado todo el día en esto, y me he acercado mucho, pero aún así no estoy haciendo lo que me gustaría. Ahora tengo la funcionalidad que necesito, pero se está lanzando un error de Javascript.
El problema es lograr que la lista clasificable regrese a su posición anterior si el elemento se coloca en el dropable, en lugar de en la lista. Actualmente, estoy guardando el html onmousedown, luego reescribiendo el html en la función de soltar del droppable. Esto funciona, pero me da una variable jquery es un error nulo. ¿Alguien puede encontrar una mejor solución?
Código:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<script type="text/javascript">
var templateHtml;
$(document).ready(function(){
$("#sortable").sortable();
$("#sortable li").addClass("drop").bind(''mousedown'',function(){
templateHtml = $("#sortable").html();
});
$("#droppable").droppable({
activeClass: ''active'',
hoverClass:''hovered'',
accept:".drop",
drop:function(event,ui){
$("#sortable").sortable(''destroy'').html(templateHtml);
$("#sortable").sortable();
$("#sortable li").addClass("drop").bind(''mousedown'',function(){
templateHtml = $("#sortable").html();
});
}
});
});
</script>
<style type="text/css">
#sortable li{
clear:both;
float:left;
}
#droppable {
clear:both;
height:300px;
width:400px;
background-color:#CCC;
}
#droppable.active {
background-color:#CFC;
}
#droppable.hovered {
background-color:#CCF;
}
</style>
</head>
<body>
<ul id="sortable">
<li id="one">One</li>
<li id="two">Two</li>
<li id="three">Three</li>
<li id="four">Four</li>
<li id="five">Five</li>
<li id="six">Six</li>
</ul>
<div id="droppable">
Drop Here
</div>
</body>
No es exactamente lo que pediste, pero necesitaba un contenedor inicial donde los elementos se pudieran arrastrar a otro contenedor clasificable, y pensé que debía compartirlo. Así fue como lo logré (jQuery 1.8.3):
$("#sortable-list").sortable();
$("#initial-list div").draggable({
revert: true,
revertDuration: 0
});
$("#initial-list").droppable({
accept: ".item-selected",
drop: function(e, ui) {
var dropped = ui.draggable;
var droppedOn = $(this);
var itemInOtherList = $(this).children("#" + dropped.attr(''id''));
itemInOtherList.removeClass(''ui-state-disabled'').draggable({ disabled: false });
dropped.remove();
}
});
$("#sortable-list").droppable({
accept: ".item-initial",
drop: function(e, ui) {
var dropped = ui.draggable;
var droppedOn = $(this);
droppedOn.append(dropped.clone()
.removeAttr(''style'')
.removeClass("item-initial")
.addClass("item-selected"));
dropped.animate(dropped.data().origPosition, {
complete: function() {
$(this).addClass(''ui-state-disabled'').draggable({ disabled: true });
}
});
}
});
JSFiddle: http://jsfiddle.net/Muskar/dwz4mvxa/8/
Por lo que pude ver, el problema con el código anterior que publiqué es que la función drop del droppable se llamaba antes del mouseup del ordenable, y desde que reescribí la lista, el ordenable se estaba enojando (por falta de mejores términos) ). Eso es un poco una conjetura.
Mirando el código final:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<script type="text/javascript">
var dropped = false;
var templateHtml;
$(document).ready(function(){
setSortable();
$("#droppable").droppable({
activeClass: ''active'',
hoverClass:''hovered'',
accept:".drop",
drop:function(event,ui){
dropped = true;
//alert(ui.draggable.text());
}
});
});
function setSortable(){
$("#sortable").sortable({
stop:function(event,ui){
if(dropped){
$("#sortable").sortable(''destroy'').html(templateHtml);
dropped = false;
setSortable();
}
}
});
$("#sortable li").addClass("drop").bind(''mousedown'',function(){
templateHtml = $("#sortable").html();
});
}
</script>
<style type="text/css">
#sortable li{
clear:both;
float:left;
}
#droppable {
clear:both;
height:300px;
width:400px;
background-color:#CCC;
}
#droppable.active {
background-color:#CFC;
}
#droppable.hovered {
background-color:#CCF;
}
</style>
</head>
<body>
<ul id="sortable">
<li id="one">One</li>
<li id="two">Two</li>
<li id="three">Three</li>
<li id="four">Four</li>
<li id="five">Five</li>
<li id="six">Six</li>
</ul>
<div id="droppable">
Drop Here
</div>
</body>
Toneladas de caprichos están involucrados aquí.
Intenté guardar el #sortable html en el evento de inicio de ordenación, pero se llama get después de que se aplica todo el ui-css, y terminé colocando los elementos de la lista en lugares locos. Entonces, necesitaba usar la función mousedown en los LIs.
El setSortable está en una función porque el evento de detención vuelve a escribir el ordenable, que es "recursivo", supongo. No estoy seguro de la terminología exacta aquí, pero podemos ir con confuso molesto.
Afortunadamente, se llama a la función drop del droppable antes de la función sortables stop, por lo que pude establecer una variable global "dropeada" que se usó para ver si el elemento se eliminó.
Todavía me sorprende que esto no fuera más fácil de hacer, pensé que jQuery tendría funciones para manejarlo mucho mejor. Tal vez me estoy perdiendo algo?
Si también puede permitir que sus otras áreas desmontables se puedan clasificar, puede usar la opción connectWith con un selector común:
<div id="droppable1" class="droppable-area"></div>
<div id="droppable2" class="droppable-area"></div>
<div id="droppable3" class="droppable-area"></div>
tu código jQuery sería entonces:
$(''.droppable-area'').sortable({ connectWith: ''.droppable-area'' });
Esta solución funcionó muy bien para mí de todos modos.