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

  1. Página tendrá dos divs: uno es #origen, que contiene una gran cantidad de imágenes en miniatura, y el segundo será #drop, donde las imágenes se puede caer en (hasta 3).
  2. necesita ser posible arrastrar y soltar las imágenes de #la posibilidad de volver a origen.
  3. #gota debe ser ordenable, ya que el orden de las 3 imágenes seleccionadas de la materia.
  4. Cuando se coloca en el #drop, las imágenes deben estar alineados, como si hubieran sido original muestra como desde el principio.

Yo nunca había usado jQuery antes, y yo ni siquiera tenía un trabajo de la página el prototipo antes, donde ya tenía el de arrastrar y soltar entre dos contenedores a través nativo de HTML5 eventos de arrastrar y colocar, pero cuando he añadido el que se puede ordenar() de jquery funcionalidad a #drop, las imágenes podrían no ser arrastrado de nuevo a #origen, que rompe mi funcionalidad.

Así que, empecé a más y quería implementar tanto en el drag & drop funcionalidad así como de los que se puede ordenar con jQuery. He leído casi todo el API para todos los que se pueden arrastrar, lanzables y ordenar la funcionalidad, pero estoy teniendo problemas para conseguir que esto funcione. No estoy seguro si es la configuración que estoy usando para cada funcionalidad.

El violín, se puede ver que las imágenes se convierten en la posibilidad de arrastrar y puedo ver la configuración que especifique en efecto (opacidad, el cursor), pero las imágenes no se puede caer en #drop.

De lo que yo entiendo, la combinación de imágenes que se pueden arrastrar las imágenes de tener un «draggable» de la clase, y haciendo #drop drop con una acepta de «.draggable», se debería permitir la funcionalidad más básica, pero incluso que no parece tener. También he leído que si ambos se pueden arrastrar y lanzables tienen el mismo «ámbito de aplicación» configuración, también debería funcionar, pero no lo es.

He aquí una sencilla versión de el código de la página, además de 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.

InformationsquelleAutor GR7 | 2013-01-13

2 Comentarios

  1. 64

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

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

    La clave fue la manija de la «caída» del evento y eliminar manualmente la imagen de omisión de #origen y agregar a #drop. Que es en realidad lo que estaba haciendo en la primera aplicación, pero no saben cómo hacerlo exactamente con jQuery:

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

    No estoy seguro de por qué jQuery realmente no quita el elemento arrastrado desde el antiguo recipiente y agregar a la nueva, pero que es lo que había que hacer para el recién caído elemento para mostrar correctamente y no se exactamente donde estaba caído, haciendo caso omiso de la colocación de css/estilo.

    La tecla de línea por @Barry Pitman en la siguiente, PARA que pregunta:

    jQuery se pueden arrastrar + drop: cómo complemento cayó elemento a caer-sobre el elemento

    ACTUALIZACIÓN: he tenido algo de tiempo libre hoy y quería comprobar si es posible con sólo ordenar, y he aquí que era.

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

    sólo dos líneas de código que permite arrastrar y soltar de un recipiente a otro, y la clasificación de los elementos. No necesita estar dentro de ul/ol listas en todo. El molesto cosa es que yo no tenía la intención de hacer que los elementos sobre el origen div ordenable, pero es algo que yo pueda vivir por ahora.

    • un poco tarde, pero este definitivamente me ayudó en mi trabajo!
    • Excelente funcionaba bien.Gracias!
    • usted señor es un héroe. tiene un upvote.
  2. 21

    Si quieres usar .droppable(), .draggable(), & .sortable(), a continuación, sólo tiene que utilizar .sortable().

    El uso de su jsfiddle, he hecho 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 que me haga saber si usted tiene cualquier pregunta!


    Enlaces:

    • gracias Dom. Es bueno saber que se puede ordenar contendría tanto arrastrar/soltar + ordenable, pero no me gusta el marcado que parece ser necesaria (añadiendo ol/ul listas). Yo tengo trabajo, sin que…pero en algún momento voy a probar y ver si se puede hacer con ordenable, sólo que sin la ul/ol.
    • ¿Cómo debo utilizar este si hay marcadores de posición en el div donde debe estar caído?
    • Esto funciona para mí sin el uso de ul/ol. Me encanta la sencillez de este método.

Dejar respuesta

Please enter your comment!
Please enter your name here