Есть ли плагин JQuery, который сочетает в себе Draggable и Selectable - PullRequest
Новая
       13

Есть ли плагин JQuery, который сочетает в себе Draggable и Selectable

28 голосов
/ 01 апреля 2009

Я собираюсь реализовать веб-интерфейс с несколькими элементами, которые можно выбирать и перетаскивать, чтобы расположить их, в группах или по отдельности . Действительно, как рабочий стол Windows.

Мы уже используем JQuery, поэтому дополнения к нему будут первым выбором. JQuery UI Draggables и Selectables по отдельности делают большую часть того, что мы хотим, но на самом деле не работаем вместе, чтобы дать тот эффект, который мы ищем.

Я полностью ошеломлен сайтом плагинов JQ (его «популярный» алгоритм кажется не очень полезным), и я хотел бы получить рекомендации относительно наилучшего способа избежать повторного изобретения колеса, так как я догадываюсь эта метафора уже сделана.

Ответы [ 3 ]

20 голосов
/ 29 июня 2009

Мне также нужно было сделать то же самое, и я не хотел использовать расширение интерфейса из eyecon.ro. После некоторых исследований я нашел Объединение селектируемых и перетаскиваемых объектов с помощью пользовательского интерфейса jQuery . Это хорошо сказано, но чтобы запустить фрагменты кода, нужно в него разобраться. Я был в состоянии заставить это работать. Я немного изменил это, это мой способ сделать это. Это требует изменений для использования на производственном уровне, но я надеюсь, что это поможет. 

// 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});
        });
    }
});

Стили CSS, чтобы увидеть, что происходит: 

#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;
    }

HTML-разметка: 

<div id="selectable">
    <div>item 1</div>
    <div>item 2</div>
    <div>item 3</div>
    <div>item 4</div>
</div>
10 голосов
/ 14 июля 2013

Этот вопрос актуален, но устарел; как и ответы. Вот обновленная версия jsfiddle @ idFlood, которая работает с 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");
        }
    }
});

У меня была проблема с вызовом _mouseStop (), который выдавал ошибку, поэтому я удалил ее; это означает, что состояние ui-selecting больше не возникает при нажатии, но все остальные функции остаются без изменений.

4 голосов
/ 27 декабря 2011

Я внес некоторые изменения в ответ, данный Синан Ясаром. Он не идеален, но уже ведет себя намного лучше, чем я, за исключением.

Одним из основных дополнений является прослушиватель щелчков, который вызывает функцию выбора. 

// 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);
});

Вы можете увидеть полный рабочий пример здесь: http://jsfiddle.net/DXrNn/4/

Существует также плагин jquery-ui, который делает именно это: http://code.google.com/p/jqdragdropmultiselect/ Проблема в том, что он не выглядит ухоженным.

edit: если вы определяете опцию «filter» перетаскиваемого объекта, вам нужно вызвать selectable.refresh () перед selectable._mouseStop (null). 

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