ejemplos - jquery drag and drop list

¿Hay un complemento de JQuery que combina arrastrar y seleccionar

Question

Estoy buscando implementar una interfaz web con una serie de elementos que se pueden seleccionar y arrastrar para posicionarlos, ya sea en grupos o individualmente . Más bien como el escritorio de Windows, de verdad.

Ya estamos usando JQuery, por lo que las adiciones serían la primera opción. JQuery UI Draggables y Selectables individualmente hacen mucho de lo que queremos, pero realmente no trabajamos juntos para dar el tipo de efecto que estamos buscando.

Estoy completamente abrumado por el sitio del complemento JQ (su algoritmo ''popular'' no parece muy útil), y agradecería la guía sobre la mejor manera de evitar una gran reinvención de las ruedas aquí, ya que supongo que esta metáfora tiene Ya se ha hecho.

Answer 1

Esta pregunta es relevante, pero es antigua; así son las respuestas. Aquí hay una versión actualizada de @ idFlood''s jsfiddle, que funciona con jQuery 1.9.1 + jQueryUI 1.10.3:

// store selected elements and the offset of the dragged element
var selected = $([]), offset = {top:0, left:0}; 

$( "#selectable > div" ).draggable({
    start: function (event, ui) {
        var $this = $(this);

        if ($this.hasClass("ui-selected")) {
            // if this is selected, attach current offset
            // of each selected element to that element
            selected = $(".ui-selected").each(function() {
                var el = $(this);
                el.data("offset", el.offset());
            });
        } else {
            // if this is not selected, clear current selection
            selected = $([]);
            $( "#selectable > div" ).removeClass("ui-selected");
        }
        offset = $this.offset();
    },

    drag: function (event, ui) {
        // drag all selected elements simultaneously
        var dt = ui.position.top - offset.top, dl = ui.position.left - offset.left;
        selected.not(this).each(function() {
            var $this = $(this);
            var elOffset = $this.data("offset");
            $this.css({top: elOffset.top + dt, left: elOffset.left + dl});
        });
    }
});

// enable marquee selecting and deselect on outside click...
$( "#selectable" ).selectable();

// ...but manually implement selection to prevent interference from draggable()
$( "#selectable" ).on("click", "div", function (e) {
    if (!e.metaKey && !e.shiftKey) {
        // deselect other elements if meta/shift not held down
        // $( "#dc-modules .dc-module" ).removeClass("ui-selected");
        $( "#selectable > div" ).removeClass("ui-selected");
        $(this).addClass("ui-selected");
    } else {
        if ($(this).hasClass("ui-selected")) {
            $(this).removeClass("ui-selected");
        } else {
            $(this).addClass("ui-selected");
        }
    }
});

Tuve un problema con la llamada _mouseStop () al lanzar un error, así que lo eliminé; esto significa que el estado de ui-selecting ya no ocurre al hacer clic, pero todas las demás funciones permanecen intactas.

Answer 2

He hecho alguna modificación a la respuesta dada por Sinan Yasar. No es perfecto, pero ya se comporta mucho más como lo haría, excepto.

Una adición principal es un detector de clics que llama a la selección.

// manually trigger the "select" of clicked elements
$( "#selectable > div" ).click( function(e){
    if (e.metaKey == false) {
        // if command key is pressed don''t deselect existing elements
        $( "#selectable > div" ).removeClass("ui-selected");
        $(this).addClass("ui-selecting");
    }
    else {
        if ($(this).hasClass("ui-selected")) {
            // remove selected class from element if already selected
            $(this).removeClass("ui-selected");
        }
        else {
            // add selecting class if not
            $(this).addClass("ui-selecting");
        }
    }

    $( "#selectable" ).data("selectable")._mouseStop(null);
});

Puede ver un ejemplo completo de trabajo aquí: http://jsfiddle.net/DXrNn/4/

También hay un complemento de jquery-ui disponible que hace eso: http://code.google.com/p/jqdragdropmultiselect/ El problema es que no se ve mantenido.

Editar: si define la opción de "filtro" del que se puede arrastrar, deberá llamar a selectable.refresh () antes de selectable._mouseStop (null).

$( "#selectable > div" ).click( function(e){
  ...
  var selectable = $("#container").data("selectable");
  selectable.refresh();
  selectable._mouseStop(null);
  ...

Answer 3

También necesitaba hacer lo mismo, y no quería usar la extensión de interfaz de eyecon.ro. Después de algunas investigaciones, encontré Combining Selectables And Draggables usando jQuery UI . Está bien dicho, pero para hacer correr los fragmentos de código hay que profundizar en él. Pude hacerlo funcionar Lo cambié ligeramente, esta es mi manera de hacerlo. Necesita modificaciones para usar en el nivel de producción, pero espero que ayude.

// this creates the selected variable
// we are going to store the selected objects in here
var selected = $([]), offset = {top:0, left:0}; 

// initiate the selectable id to be recognized by UI
$("#selectable").selectable({
    filter: ''div'',
});

// declare draggable UI and what we are going to be doing on start
$("#selectable div").draggable({
     start: function(ev, ui) {
        selected = $(".ui-selected").each(function() {
           var el = $(this);
            el.data("offset", el.offset());
        });

        if( !$(this).hasClass("ui-selected")) $(this).addClass("ui-selected");
        offset = $(this).offset();
    },
    drag: function(ev, ui) {
        var dt = ui.position.top - offset.top, dl = ui.position.left - offset.left;

        // take all the elements that are selected expect $("this"), which is the element being dragged and loop through each.
        selected.not(this).each(function() {
             // create the variable for we don''t need to keep calling $("this")
             // el = current element we are on
             // off = what position was this element at when it was selected, before drag
             var el = $(this), off = el.data("offset");
             el.css({top: off.top + dt, left: off.left + dl});
        });
    }
});

Estilos CSS para poder ver lo que pasa:

#selectable {   width: 100%; height: 100%;}
#selectable div {
    background: #ffc;
    line-height: 25px;
    height: 25px;
    width: 200px;
    border: 1px solid #fcc;
    }
#selectable div.ui-selected {
    background: #fcaf3e;
    }
#selectable div.ui-selecting {
    background: #8ae234;
    }

Marcado HTML:

<div id="selectable">
    <div>item 1</div>
    <div>item 2</div>
    <div>item 3</div>
    <div>item 4</div>
</div>