jQuery UI Droppable - клонировать выпадающий элемент?

JSFiddle: https://jsfiddle.net/dy556efs/2/

Элементы с левой стороны должны быть клонированы при перетаскивании на правую сторону. В настоящее время они полностью перемещены и не могут заставить помощника по клонированию работать должным образом.

Не могли бы вы указать мне правильное направление?

$(".social-msl-link-label").draggable({
    connectToSortable: ".social-msl-group-list",
    revert: "invalid",
    helper: "clone"
});

$(".social-msl-links-order li").droppable({
    accept : ".social-msl-link-label",
    tolerance: 'pointer',
    greedy : true,
    hoverClass: 'highlight',
    drop: function(ev, ui) {
        $(ui.draggable).detach().css({position : 'relative', top: 'auto',left: 'auto'}).appendTo(this);
    }
});

jquery jquery-ui jquery-ui-draggable jquery-ui-sortable jquery-ui-droppable
person Kobius    schedule 05.01.2016    source источник

Ответы (1)


arrow_upward
5
arrow_downward

На основании документации для helper свойства кажется, что элемент просто клонирован во время перетаскивания. Другими словами, вам все равно придется вручную клонировать элемент, прежде чем отсоединять/добавлять его. Используйте метод .clone() перед его отсоединением:

Обновленный пример

$(".social-msl-links-order li").droppable({
  accept: ".social-msl-link-label",
  tolerance: 'pointer',
  greedy: true,
  hoverClass: 'highlight',
  drop: function(ev, ui) {
    $(ui.draggable).clone(true).detach().css({
      position: 'relative',
      top: 'auto',
      left: 'auto'
    }).appendTo(this);
  }
});

Если вы хотите удалить дубликаты, вы можете перебрать удаляемые элементы и сравнить текст ранее удаленного элемента с родственными элементами. Внутри обратного вызова drop:

Обновленный пример

// ...
$(this).siblings().filter(function () {
  return $(this).text().trim() === $(ui.draggable).text().trim();
}).empty();
person Josh Crozier    schedule 05.01.2016
comment
Отлично спасибо! Отлично работает, не могли бы вы знать, как расширить это, чтобы правый столбец принимал только 1 элемент каждого элемента. Итак, в примере с JSFiddle, если вы добавите Facebook более одного раза, предыдущая версия будет удалена? - person Kobius; 05.01.2016
comment
замечательная работа, спасибо за помощь! На самом деле имеет смысл теперь, когда вы написали это, раньше не могли найти способ сравнить другие элементы. - person Kobius; 05.01.2016
comment
@JoshCrozier, почему detach()..? - person T J; 05.01.2016
comment
@TJ - это код, который изначально использовал ОП. Вы можете прочитать разницу между remove() и detach() в документации. - person Josh Crozier; 05.01.2016
comment
@JoshCrozier Я думал, что это было добавлено вами для какой-то цели, nvm. поскольку метод clone() возвращает элемент в памяти, мне было интересно, какой смысл вызывать для него detach()... Я не видел скрипку OP. Глядя на это снова, только что заметил, что ui.draggable - это объект jquery, который не нужно делать $(ui.draggable)... - person T J; 05.01.2016