2010-11-04 2 views
1

У меня есть следующий ...JQuery перетаскивания

<ul> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
</ul> 
<ul> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
</ul> 
<ul> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
</ul> 

мне нужно перетащить каждый элемент из одного ul к другому, но избежать дублирования в том же ul и просто добавить товар в выпавшем ул.

Использование jQuery Я пробовал много вещей, но всегда есть что-то, что его испортило.

любые идеи? Thnx

ответ

1

можно использовать jqueryui http://jqueryui.com/demos/sortable/

делает его очень легко DragDrop/изменить размер/падение ...

+0

sortables работать хорошо, но проблема в том, каждый раз, когда я уронить что-то есть дублируются пункты – Val

0

Это осложняется тем, что у вас есть несколько sortables и это сложно заставить работать. Я сделал это, используя сортируемый контроллер с опцией connectTo, определяющий другие возможные цели.

+0

Я комфортабельный помощью sortables, но единственная проблема в том, что мне нужно только копию, что пункт. поэтому, если элемент уже существует, я могу отобразить ошибку или игнорировать перетаскивание. – Val

+0

. Я не делал этого некоторое время, поэтому моя память немного туманна, но я думаю, что вы можете подключить событие «получать» или «отбросить» на цель, выполнить некоторую проверку и вернуть false, чтобы отклонить перетаскиваемый. – hybernaut

0

попытка удалить повторы, прежде чем добавить

$("li").draggable({ 
appendTo: "ul", 
helper: "clone" 
}); 
$("ul").droppable({ 
activeClass: "ui-state-default", 
hoverClass: "ui-state-hover", 
accept: ":not(.ui-sortable-helper)", 
drop: function(event, ui) { 
    $(this).find("li:contains('" + ui.draggable.text() + "')").remove(); 

    $("<li></li>").text(ui.draggable.text()).appendTo(this); 
} 
}) 
Смежные вопросы