Auswählbar & Draggable jQuery, um ein Windows Explorer-ähnliches Fenster zu machen

Question

Ich bin jetzt mit einer anderen Sache konfrontiert, die ich nicht herausfinden kann, wie zu tun ist.

Ich bin neu in jQuery und ich versuche, ein Symbol ziehbar zu machen und wenn Sie es in den Ordner (.folder div) fallen lassen Es wird dorthin verschoben werden.

1. Ziehen Sie das Symbol (Ich weiß, wie es zu ziehen, aber es ist nur sichtbar, in der übergeordneten div und nicht auf der gesamten Webseite.)
2. Tropfen auf einem Ordner auf dem #navbar (links) (Auch hier kann ich nicht herausfinden, wie es über einen bestimmten div abwerfbaren zu machen)
3. entfernen sie die div auf den ursprünglichen Inhalt bewegt und neu auszurichten, alle anderen div
4. Call a pHP-Seite die Datei mit diesem verbunden zu bewegen div in das ausgewählte Verzeichnis

div in der Mitte der Seite (Ich möchte sie ziehbare) sind Symbole, wenn Sie sie ziehen und sie dann auf einen Ordner auf der linken Seite fallen lassen, wird es dorthin verschoben werden.

Hier können Sie sehen, wie es (besser mit Firefox) aussieht: http://narks.xtreemhost.com/

Dies ist nur eine Testseite, Ihnen zu zeigen. Kann mir bitte jemand dabei helfen?

die Struktur der Webseite kennen, sehen Windows 7 explorer in CSS layout (Danke nochmal an Ivan Ivanić für seine kostbare help1)

EDIT jQuery Drag & Drop:

$("div.explorer_icon").draggable({ 
    opacity: 0.50, 
    revert: true, 
    distance: 30, 
    zIndex: 9999, 
    scroll: false, 
    appendTo: 'body', 
    containment: 'window', 
    helper: 'clone' 
}); 
$("#navbar div.item_list").droppable({ 
    accept: '.explorer_icon', 
    hoverClass: 'item_list_hover', 
    tolerance: 'pointer', 
    drop: function(event, ui) { 
    } 
}); 

Answer 1

ich sehr empfehlen würde jQueryUI . Demos hier: http://jqueryui.com/demos/. Beachten Sie den Link zu ihren auswählbaren und verschiebbaren Objekten.

Darüber hinaus, von einem schnellen Scan Ihrer Probleme, sieht es aus wie eine spezifische Lösung wäre die Sortierbar, die ich liebe. Hier ist die Zwei-Liste sortierbar mit Liste Mischlinge: http://jqueryui.com/demos/sortable/#connect-lists

Update: Sie geben auch an, dass Sie die enthaltenen div und solche verlassen müssen. Hier ist die spezifische Seite für Grenzen für ziehbare: http://jqueryui.com/demos/draggable/#constrain-movement. Beachten Sie im Allgemeinen die Links zu verschiedenen Beispielen in der rechten Seitenleiste für die einzelnen jQueryUI-Funktionen. Sie repräsentieren alles, was sofort verfügbar ist. Wenn Sie darüber hinaus gehen müssen, senden Sie Ihre Implementierung bitte an die jqueryUI-Leute. Wer weiß, es könnte das nächste Feature der nächsten Version von jqueryUI werden.