Jquery UI перетаскиваемый: клонировать, если нажата Ctrl - PullRequest
Новая
       12

Jquery UI перетаскиваемый: клонировать, если нажата Ctrl

4 голосов
/ 27 августа 2010

У меня есть список перетаскиваемых ячеек таблицы, которые можно перенести на второй стол. Они настроены на клонирование, так как исходная таблица должна оставаться неизменной, если элементы перетаскиваются из нее.

Теперь я хочу иметь возможность перемещать отброшенные элементы во второй таблице из ячейки в ячейку. Но если клавиша Control нажата при перетаскивании элемента во вторую таблицу, элемент должен быть клонирован. Теперь я не знаю, как элегантно достичь этой последней части.

Пока мой код, отсутствует только клон в части Ctrl: 

$(".drag_clone").draggable({helper: "clone"});
$(".draggable").draggable({revert: "invalid"});
$(".droppable").droppable(
    {
        drop: function(event, ui) {
            if (ui.draggable.hasClass("draggable")) {
                ui.draggable.remove();
            }
            $('<div class="draggable"></div>').text(ui.draggable.text()).draggable({revert: "invalid"}).appendTo(this);
        }
    });

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

В коде, который я вставил сюда, я создаю новый элемент, который затем добавляется к значению сброса. Это прекрасно работает для клонируемых перетаскиваемых объектов, но с не клонируемыми перетаскиваемыми объектами остаются оригинальные перетаскиваемые объекты, поэтому я в итоге продублирую их.

Если вместо этого я просто добавляю перетаскиваемый объект к предмету сброса, перетаскиваемый клон удаляется с его исходного места.

Edit: Я обнаружил проблему, я использовал ui.draggable, который ссылается на исходный перетаскиваемый объект, а не ui.helper, который ссылается на клонированный. Я добавляю окончательный рабочий код в качестве ссылки: 

$(".drag_clone").draggable({helper: "clone"});
$(".draggable").draggable({revert: "invalid"});
$(".droppable").droppable(
    {
        hoverClass: 'ui-state-hover',
        drop: function(event, ui) {
            ui.helper.remove()
            $('<div class="draggable"></div>').text(ui.draggable.text()).mousedown(function(event) 
                {$(this).draggable('option', {
                         helper : event.ctrlKey ? 'clone' : 'original' });
                         }).draggable({ revert: "invalid" }).appendTo(this);
        }
    });

1 Ответ

13 голосов
/ 27 августа 2010

Вы можете сделать это, прикрепив обработчик mousedown перед вызовом .draggable(), например: 

$(".draggable").mousedown(function(event) {
  $(this).draggable('option', { helper : event.ctrlKey ? 'clone' : 'original'});
}).draggable({ revert: "invalid" });

Вы можете увидеть его в действии здесь , так как виджет также работает на mousedown, мы просто хотим прикрепить обработчик событий перед обработчиком виджета, так как обработчики событий запускают в указанном порядке , поэтому все, что мы делаем, это устанавливаем helper параметр непосредственно перед началом перетаскивания.

...