JQuery Hilfe: Ziehbare sortierbar und dann wieder zurück zu ziehbar

Question

Ich habe einen Pool von Elementen in der Drag-Liste, die auf eine sortierbare mit connectToSortable Option verbunden ist. Jetzt möchte ich einige Elemente aus dieser Art Liste entfernen und sie zurück in die Drag Liste verschieben. So ähnlich wie die eine Undo. Angenommen, der Benutzer einig 5 Artikel bewegt Liste zu sortieren und entscheidet, er / sie nur 4 Artikel will, und beschließt, nur das unerwünschte Element zieht aus dem sortlist auf der Drag-Liste. Wie kann ich das erreichen einen Link „Entfernen“ in der Sortierliste ohne Zugabe. Danke vielmals. Weitere Informationen finden Sie auf http://the-stickman.com/web-development/javascript/jquery-dropping-items-from-a-draggable-list-to-a-sortable-list/

Answer 1

Das jQuery UI Beispiel scheint wie das, was Sie nach. Es verfügt über zwei miteinander verbundene Liste und der Benutzer kann Elemente zwischen ihnen ziehen.

Aber ich vermute, dass Ihr Szenario nicht das Beispiel entspricht. Lassen Sie sagen, Sie eine Drag-Liste haben, ein UL mit jedem LI gemacht ziehbar und an einen anderen UL nachverfolgen eine sortierbare (Siehe Link für ein Beispiel). Jedes Mal, wenn Sie etwas von der Drag-Liste ziehen, Klon des Elements verwendet gezogen. Mit Hilfe des „out“ Ereignisse, können Sie sich registrieren, wenn man ein Element außerhalb der sortierbare Liste zieht und wenn der Artikel noch draußen ist, wenn das „Stop“ Ereignis ausgelöst wird, entfernen Sie sie aus dem sortierbar. Mit den ui.position & ui.offset Eigenschaften der sortierbar-Widget können Sie bestimmen, ob der Artikel über die Drag-Liste gezogen wurde, bevor sie tatsächlich das Element aus dem sortierbar zu entfernen.

Hope, das hilft.

Answer 2

Ich denke, die einfachste Lösung ist Ihre ziehbar Liste abwerfbaren auch zu machen, und zu handhaben, dass die Drop-Ereignis. Ich habe einen #priority_articles_list als sortierbar und li.article als graggable, sie sind innen #articles. In einfachsten Fall können Sie einfach anrufen ui.draggable.remove();, dass der Trick tun sollten.

$("#articles").droppable({
  accept: '#priority_articles_list > li',

  drop: function(ev, ui) {
    draggable_id = "#" + ui.draggable.attr("id").replace("priority_", "");
    $(draggable_id).removeClass("shouldnt_drag");
    ui.draggable.remove();
    if ($("#priority_articles_list").children("li").length == 1) {
      $("#priority_articles p").show();
    }
  }
});