Dragula Копировать и удалитьOnSpill

Question

Я пытаюсь использовать Dragula Drag & Бросьте библиотеку для клонирования элементов в целевой контейнер И разрешите пользователю удалять клонированные элементы из целевого контейнера путем перетаскивания &, отбрасывая их за пределы целевого контейнера (разлив).

Используя приведенные примеры у меня есть это:

dragula([$('left-copy-1tomany'), $('right-copy-1tomany')], { 
    copy: function (el, source) { 
     return source === $('left-copy-1tomany'); 
    }, 
    accepts: function (el, target) { 
     return target !== $('left-copy-1tomany'); 
    } 
}); 
dragula([$('right-copy-1tomany')], { removeOnSpill: true }); 

Что не работает - кажется, что «removeOnSpill» просто не работает, если контейнер принимает копию.

Кто-нибудь знает, чего я не делаю, неправа или если есть обход?

TIA!

Answer 1

Из Dragula документации
options.removeOnSpill

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

Answer 2

Я пришел сюда после того, как нашел какое-то время для решения аналогичной проблемы, используя ng2-dragula для углового2.

dragulaService.setOptions('wallet-bag', { 
    removeOnSpill: (el: Element, source: Element): boolean => { 
    return source.id === 'wallet'; 
    }, 
    copySortSource: false, 
    copy: (el: Element, source: Element): boolean => { 
    return source.id !== 'wallet'; 
    }, 
    accepts: (el: Element, target: Element, source: Element, sibling: Element): boolean => { 
    return !el.contains(target) && target.id === 'wallet'; 
    } 
}); 

У меня есть 4 див, что все это может перетащить в один, который имеет идентификатор wallet Они вся часть wallet-bag с помощью этого кода, все они могут копировать в кошелек, а не копировать между собой другие, и вы можете удалить их из кошелька, используя разлив, но не от других.

Я отправляю свое решение, так как оно может помочь кому-то.

Answer 3

Итак, общий ответ я пришел корыто, что:

вы можете работать «removeOnSpill» - даже с опцией «копия» установлен на истинный - только если вы установите опцию «копировать» претендует ТОЛЬКО когда контейнер «источник» НЕ является тем, с которого вы пытаетесь удалить элементы.

В моем случае у меня было 3 контейнера, из которых я могу перетащить еще один, называемый 'to_drop_to'. Эти контейнеры имеют идентификатор, начинающийся с «перетаскивания».

Поэтому я:

var containers = [document.querySelector('#drag1'), 
       document.querySelector('#drag2'), 
       document.querySelector('#drag3'), 
       document.querySelector('#to_drop_to')]; 

dragula(containers, { 
    accepts: function (el, target, source, sibling) { 
     return $(target).attr('id')=="gadget_drop"; // elements can be dropped only in 'to_drop_to' container 
    }, 
    copy: function(el,source){ 
     return $(source).attr('id').match('drag'); //elements are copied only if they are not already copied ones. That enables the 'removeOnSpill' to work 
    }, 
    removeOnSpill: true 
} 

и это работает для меня.

Надеюсь, это поможет.