property - jquery list contains

jQuery se puede arrastrar y soltar entre dos contenedores y se puede ordenar

Question

Estoy tratando de desarrollar una pequeña página que tenga la siguiente funcionalidad:

1. La página tendrá dos divs: uno será #origin, que contiene muchas imágenes en miniatura, y el segundo será #drop, donde se pueden colocar las imágenes (solo hasta 3).
2. Debe ser posible arrastrar y soltar las imágenes de #drop de nuevo al origen.
3. #drop debe ser ordenable, ya que el orden de las 3 imágenes seleccionadas es importante.
4. Cuando se suelta en #drop, las imágenes deben alinearse, como si se hubieran mostrado originales desde el principio.

Nunca había usado jQuery antes, e incluso antes tenía un prototipo de página de trabajo, donde ya tenía el arrastrar y soltar entre dos contenedores a través de los eventos nativos de HTML5 arrastrar y soltar, pero cuando agregué la funcionalidad de jQuery ordenable () a #drop, las imágenes ya no se podían arrastrar de nuevo a # origin, lo que rompe mi funcionalidad.

Entonces, comencé de nuevo y quería implementar tanto la funcionalidad de arrastrar y soltar como la ordenable con jQuery. He leído prácticamente toda la API para todas las funciones que se pueden arrastrar, soltar y ordenar, pero tengo problemas para que esto funcione. No estoy seguro si es la configuración que estoy usando para cada funcionalidad.

En el violín, puedes ver que las imágenes se pueden arrastrar y puedo ver las configuraciones que especifico en efecto (opacidad, cursor), pero las imágenes no se pueden soltar en #drop.

Por lo que entiendo, la combinación de hacer que las imágenes se puedan arrastrar, las imágenes que tienen una clase de "arrastrables", y hacer que #drop sea descargable con un ".draggable", debería permitir la funcionalidad más básica, pero incluso eso no parece tomar. También leí que si tanto la opción arrastrable como la que se puede soltar tienen la misma configuración de "alcance", también debería funcionar, pero no lo es.

Aquí hay una versión simple del código de la página, más un jsFiddle: http://jsfiddle.net/39khs/

Código:

css:

#origin {
  background-color: green;
}
#drop {
  background-color: red;
  min-height: 120px;
}

js

$("img").draggable({ helper: "clone", opacity: 0.5, cursor: "crosshair", scope: "drop" });
$("#drop").droppable({ accept: ".draggable", scope: "drop"});
$("#drop").sortable();

html:

<div id="wrapper">
    <div id="origin" class="fbox">
        <img src="http://placehold.it/140x100" id="one" title="one" class="draggable" />
        <img src="http://placehold.it/140x100" id="two" title="two" class="draggable" />
        <img src="http://placehold.it/140x100" id="three" title="three" class="draggable" />
    </div>
  <p>test</p>
    <div id="drop" class="fbox">

    </div>
</div>

Cualquier ayuda es muy apreciada.

Answer 1

Aquí está el violín con el resultado final:

http://jsfiddle.net/39khs/82/

La clave fue manejar el evento "soltar" y eliminar manualmente la imagen soltada de #origin y agregarla a #drop. Eso es realmente lo que estaba haciendo en la primera implementación, pero no sabía cómo hacerlo exactamente con jQuery:

 $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);

No estoy seguro de por qué jQuery no elimina realmente el elemento arrastrado del contenedor antiguo y lo agrega al nuevo, pero eso es lo que se tuvo que hacer para que el nuevo elemento se mostrara correctamente y no exactamente donde se colocó. sin tener en cuenta la colocación / diseño de css.

La línea clave fue de @Barry Pitman en la siguiente pregunta de SO:

jQuery draggable + droppable: cómo ajustar el elemento dropeado al elemento dropeado

ACTUALIZACIÓN: tenía algo de tiempo libre hoy y quería comprobar si era posible con solo ordenable, y he aquí que estaba.

http://jsfiddle.net/wj4ak/5/

solo dos líneas de código permiten arrastrar y soltar de un contenedor a otro y ordenar los elementos. No necesitan estar dentro de las listas de ul / ol en absoluto. Lo único molesto es que no tenía la intención de hacer que los elementos en el div de origen se puedan clasificar, pero es algo con lo que puedo vivir por ahora.

Answer 2

Si desea usar .droppable() , .draggable() , y .sortable() , solo necesita usar .sortable() .

Usando su jsfiddle, hice los siguientes cambios:

HTML:

<div id="wrapper">
    <div id="origin" class="fbox">
    <ul id="sort1" class="list">
      <li><img src="http://placehold.it/140x100" id="one" title="one" class="draggable" /></li>
      <li><img src="http://placehold.it/140x100" id="two" title="two" class="draggable" /></li>
      <li><img src="http://placehold.it/140x100" id="three" title="three" class="draggable" /></li>
    </ul>
    </div>
  <p>test</p>
    <div id="drop" class="fbox">
      <ul id="sort2" class="list"></ul>
    </div>
</div>

JAVASCRIPT:

$( "#sort1, #sort2" ).sortable({
      helper:"clone", 
      opacity:0.5,
      cursor:"crosshair",
      connectWith: ".list",
      receive: function( event, ui ){ //this will prevent move than 3 items in droppable list
         if($(ui.sender).attr(''id'')===''sort1'' && $(''#sort2'').children(''li'').length>3){
           $(ui.sender).sortable(''cancel'');
         }
      }
});

$( "#sort1,#sort2" ).disableSelection();

CSS:

#origin
{
  background-color: green;
}
#drop
{
  background-color: red;
  min-height: 120px;
}
.list
{ 
  min-height: 120px;
} 
.list li
{
 display: inline-block;
 list-style-type: none;
 padding-right: 20px;
}

DEMO: http://jsfiddle.net/39khs/80/

Espero que esto ayude y hágame saber si tiene alguna pregunta!

Campo de golf:

• http://api.jqueryui.com/sortable/