Logik hinter Drag & Drop

Question

Ich frage mich, wie "es funktioniert" und "wie es entworfen und implementiert werden sollte" Seite der grundlegenden Drag & Drop-Funktionalität.

Ich habe noch nie eine solche Funktionalität implementiert. Ich plane dies für eines meiner Projekte und ich habe einige Ideen, wie ich es umsetzen kann. Ich wollte sicherstellen, dass ich auf dem richtigen Weg bin und dass ihr wahrscheinlich auch etwas zu dieser Sache zu sagen habt ...

Stellen wir uns vor, ich habe 5 Elemente, die wie folgt aufgelistet sind und aus einer Datenbank gegriffen haben;

<div id="1">this is content for 1</div> 
<div id="2">this is content for 2</div> 
<div id="3">this is content for 3</div> 
<div id="4">this is content for 4</div> 
<div id="5">this is content for 5</div> 

da diese aus einer Datenbank abziehbar wir wissen, dass es ein Feld namens „Sequenz“ oder „Ordnung“ hat den Auftrag, den wir gehen, um Ausgang zu unterscheiden. Stellen wir uns auch vor, dass die Spaltenwerte der "Sequenz" die gleichen sind wie die IDs der divs. Also: 1,2,3,4 und 5 jeweils.

Meine Frage und Gedanken;

Wenn ich Div 4 ziehen und zwischen 1 und 2 fallen lassen; Was sind die Schritte von dort an? Beispiel:

1) bestimmen die ID des div, das gezogen wird (nennen wir diese div-a)

2) bestimmen, die ID des div, die div-a nach eingeführt wird (oder vor) in diesem Fall nach und deshalb nach div id 1 (nennen wir diese div-b)

3) aktualisieren div-a ‚s-Sequenz in db und legen sie es auf die aktuelle Folge von div-b

nach diesem Schritt bin ich alle verwirrt ... Zähle ich alle divs und je nach dem, was Reihenfolge der divs sind, aktualisiere ich die db entsprechend? oder liege ich völlig falsch und gibt es einen anderen Weg?

---

Danke für die Antworten, aber ich weiß, es gibt Plugins und andere Sachen dies zu tun zu bekommen, aber ich bin daran interessiert sind nur in der Logik ein Teil davon ..

Answer 1

Ich glaube, jquery gibt Ihnen eine Möglichkeit zu ergreifen ihre Bestellung basiert auf ID?

Die Art, wie ich es getan habe, ist jedes Mal, wenn eine Aktion auftritt, greifen Sie die aktuelle Bestellung, senden Sie es zurück an meine App über Ajax. Dann analysiert meine App einfach die IDs von dem, was sie bekommen hat und aktualisiert den Bestellwert jedes Artikels.

Answer 2

Sofern Sie dies nicht für Ihre eigene Ausbildung tun, würde ich vorschlagen, dass Sie jQueryUI verwenden.

Es hat unter anderem Drag-and-Drop-Funktionalität, die Ihnen wahrscheinlich mit dem Kern von DaD helfen würde, so dass Sie die für Ihr Problem spezifischen Teile implementieren können.

Answer 3

http://jqueryui.com/demos/sortable/

$("#col1").sortable({ 
     placeholder: "top", 
     forcePlaceholderSize: true, 
     revert: true, 
     update: function() { 
       $.ajax({ 
        type: "GET", 
        url: "/request.php", 
        data: "data="+$(this).sortable("toArray")+"", 
        success: function(msg){ } 
         });   
      } 
    }); 

toArray ist eine Folge Ihrer divs ids