Quiero usar jquery que pueden arrastrarse/drop para permitir al usuario seleccionar un grupo de objetos (cada uno tiene una casilla de verificación en la esquina) y, a continuación, arrastre la selección de objetos como un grupo…

Yo no puede decidir por la vida de mí cómo hacerlo jaja.

Aquí es lo que estoy pensando conducirá a una solución que se puede usar, en cada uno de los que se pueden arrastrar objeto, utilice el botón start() del evento y de alguna manera agarrar todos los otros objetos seleccionados y agregarlos a la selección

Yo también estaba pensando en hacer el objeto arrastrado ver como un grupo de objetos (que son imágenes, por lo que un montón de fotos tal vez) por razones de rendimiento. Creo que con la posibilidad de arrastrar la funcionalidad podría caerse si arrastra varias docenas de objetos a la vez, hace que suene como una idea mejor?

InformationsquelleAutor Jiaaro | 2009-04-27

4 Comentarios

  1. 78

    Podría utilizar la posibilidad de arrastrar la helper opción para arrastrar los grupos de elementos.

    Por ejemplo, si su draggables han casillas de verificación, usted puede devolver los elementos seleccionados de la función auxiliar como:

    $('#dragSource li').draggable({
      helper: function(){
        var selected = $('#dragSource input:checked').parents('li');
        if (selected.length === 0) {
          selected = $(this);
        }
        var container = $('<div/>').attr('id', 'draggingContainer');
        container.append(selected.clone());
        return container; 
      }
    }); 

    Demo

    He instalación de una demo con la posibilidad de arrastrar imágenes con las casillas de verificación y un poco de líquido de diseño. Haga clic en «Ejecutar Fragmento de Código» en la parte inferior para ver el resultado:

    JS:

    $(function() {
    
      $('#dragSource li').draggable({
        helper: function() {
          var selected = $('#dragSource input:checked').parents('li');
          if (selected.length === 0) {
            selected = $(this);
          }
          var container = $('<div/>').attr('id', 'draggingContainer');
          container.append(selected.clone());
          return container;
        }
      });
    
      $('#dropTarget').droppable({
        tolerance: 'pointer',
        drop: function(event, ui) {
          $(this).append(ui.helper.children());
        }
      });
    
      $('#selectAll').click(function() {
        $('#dragSource input').prop('checked', true);
        return false;
      });
    
      $('#selectNone').click(function() {
        $('#dragSource input').prop('checked', false);
        return false;
      });
    
      $('#selectInvert').click(function() {
        $('#dragSource input').each(function() {
          var $this = $(this);
          if ($this.prop('checked')) {
            $this.prop('checked', false);
          } else {
            $this.prop('checked', true);
          }
        });
        return false;
      });
    });

    CSS:

    body {
      font-family: sans-serif;
      overflow-x: hidden;
    }
    div {
      margin: 5px;
      padding: 0;
    }
    ul {
      margin: 0;
      padding: 0;
    }
    li {
      list-style: none;
      padding: 0;
      margin: 0;
      float: left;
      white-space: nowrap;
    }
    #selectActions span,
    #selectActions li {
      float: left;
      padding: 5px;
    }
    .droppableContainer {
      width: 48%;
      float: left;
      min-height: 200px
    }
    .droppableContainer li {
      height: 90px;
      width: 110px;
      margin: 2px;
      background-color: white;
      padding-bottom: 4px;
    }
    .droppableContainer img {
      width: 90px;
      max-height: 90px;
      max-width: 90px;
      width: 90px;
      vertical-align: middle;
    }
    .droppableContainer input {
      height: 90px;
      vertical-align: middle;
    }
    #draggingContainer {
      width: 48%;
    }
    #draggingContainer input {
      visibility: hidden;
    }
    #dropTarget {
      border: 3px dashed grey;
    }
    #dropTarget input {
      visibility: hidden;
    }

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <div id="selectActions">
    <span>Select:</span>
    <ul>
    <li><a id="selectAll" href="#">all</a>
    </li>
    <li><a id="selectNone" href="#">none</a>
    </li>
    <li><a id="selectInvert" href="#">invert</a>
    </li>
    </ul>
    </div>
    <div style="clear:left;">
    <div id="dragSource" class="droppableContainer">
    <ul>
    <li>
    <img src="http://imgs.xkcd.com/comics/drapes.png" /><input type="checkbox" />
    </li>
    <li>
    <img src="http://imgs.xkcd.com/comics/misusing_slang.png" />
    <input type="checkbox" />
    </li>
    <li>
    <img src="http://imgs.xkcd.com/comics/donner.jpg" />
    <input type="checkbox" />
    </li>
    <li>
    <img src="http://imgs.xkcd.com/comics/a_new_captcha_approach.png" />
    <input type="checkbox" />
    </li>
    <li>
    <img src="http://imgs.xkcd.com/comics/bug.png" />
    <input type="checkbox" />
    </li>
    <li>
    <img src="http://imgs.xkcd.com/comics/open_source.png" />
    <input type="checkbox" />
    </li>
    <li>
    <img src="http://imgs.xkcd.com/comics/tag_combination.png" />
    <input type="checkbox" />
    </li>
    <li>
    <img src="http://imgs.xkcd.com/comics/a_simple_plan.jpg" />
    <input type="checkbox" />
    </li>
    <li>
    <img src="http://imgs.xkcd.com/comics/it_might_be_cool.png" />
    <input type="checkbox" />
    </li>
    <li>
    <img src="http://imgs.xkcd.com/comics/hedgeclipper.jpg" />
    <input type="checkbox" />
    </li>
    <li>
    <img src="http://imgs.xkcd.com/comics/pep_talk.png" />
    <input type="checkbox" />
    </li>
    <li>
    <img src="http://imgs.xkcd.com/comics/regular_expressions.png" />
    <input type="checkbox" />
    </li>
    <li>
    <img src="http://imgs.xkcd.com/comics/pwned.png" />
    <input type="checkbox" />
    </li>
    <li>
    <img src="http://imgs.xkcd.com/comics/post_office_showdown.png" />
    <input type="checkbox" />
    </li>
    <li>
    <img src="http://imgs.xkcd.com/comics/im_an_idiot.png" />
    <input type="checkbox" />
    </li>
    <li>
    <img src="http://imgs.xkcd.com/comics/pointers.png" />
    <input type="checkbox" />
    </li>
    <li>
    <img src="http://imgs.xkcd.com/comics/chess_photo.png" />
    <input type="checkbox" />
    </li>
    <li>
    <img src="http://imgs.xkcd.com/comics/50_ways.png" />
    <input type="checkbox" />
    </li>
    <li>
    <img src="http://imgs.xkcd.com/comics/e_to_the_pi_times_i.png" />
    <input type="checkbox" />
    </li>
    <li>
    <img src="http://imgs.xkcd.com/comics/self-reference.jpg" />
    <input type="checkbox" />
    </li>
    <li>
    <img src="http://imgs.xkcd.com/comics/starwatching.png" />
    <input type="checkbox" />
    </li>
    </ul>
    </div>
    <div id="dropTarget" class="droppableContainer">
    </div>
    </div>

    • Con JQueryUI 1.7.2, usted debería ser capaz de mezclar esto con posibilidad de seleccionar el lugar de las casillas de verificación.
    • Se puede poner la muestra en jsfiddle lugar? El jsbin muestra está caducado.
    • Gracias por permitirme conocer, me he fijado en la demostración.
    • usted salvó mi día, muchas gracias!
    • puede que os invito a echar un vistazo a una de jQuery drop relacionados con la pregunta aquí : stackoverflow.com/questions/51301758/… ?
    • Sería ideal si los elementos en este ejemplo se puede seleccionar con el ratón el lazo. Así que usted acaba de ‘agarrar’ multimple elementos con el ratón y ya está. Es esto posible?

  2. 1

    Rendimiento Idea:

    Hacer un invisible objeto de grupo’. Cuando los artículos son revisados, los hacen los niños del grupo objeto, cuando no se activa, establecer de nuevo como hijos de el cuerpo del documento, o estática de los padres o lo que sea. Vas a tener que traducir los objetos de posición para asegurarse de que no saltan, también de conectar/desconectar el ratón controladores de eventos para los niños del grupo de agregar/quitar.

    Cuando usted consigue un ratón arriba/abajo evento en cualquiera de los niños, lo que te vas a mover en realidad es que el objeto de grupo.

    Esto debería hacer que sea más sencillo.

    • sería más sencillo si no fuera un diseño fluido 😉
  3. 1

    Esto exactamente lo que estoy tratando de hacer. Hasta ahora no he tenido éxito, pero he encontrado este tipo hecho en una muy complicada. usted puede comprobar fuera tal vez usted podría hacer algo con eso.

    Esta debería ser una característica en la que se pueden arrastrar. Espero que implementar lo más pronto que tarde

  4. 1

    Lo que he hecho para esto se crea una función que le dan el esclavo /maestro de los elementos, lo que crea un bind() función para el maestro (yo soy sólo permitir el arrastre de la maestra en este caso, se puede trabajar alrededor de esto, estoy seguro), lo que hace que el esclavo siga en torno al uso del estándar css jQuery.

        function overlap(slave,master) {
    $('a#groupTheseBlocks').click(function(){
    master.bind('drag', groupBlocks);
    slave.draggable('disable');
    //remember where the slave is in relation to the master
    sLeftRef = (slave.offset().left - master.offset().left);
    sTopRef = (slave.offset().top - master.offset().top);
    });
    function groupBlocks() {
    var left = master.offset().left;
    var top = master.offset().top;
    slave.draggable('disable');
    slave.css('left', (left + sLeftRef) + 'px');
    slave.css('top', (top + sTopRef) + 'px');
    } 
    }

    Supongo que voy a publicar más a esto de una vez tengo un ejemplo de trabajo. Como destaca este es trabajo para mí. Lo que falta es una forma de llamar la superposición(slave, master) con los elementos que desea agrupar. Estoy haciendo esto en una manera específica. Puedes inteligente una manera de hacerlo, estoy seguro.

Dejar respuesta

Please enter your comment!
Please enter your name here