Wybieralne i przeciągalne jQuery do stworzenia okna podobnego do Eksploratora Windows.

Question

Mam teraz do czynienia z inną rzeczą, której nie potrafię wymyślić.

Jestem nowy w jQuery i próbuję zrobić ikonę przeciągalną, a po upuszczeniu go w folderze (.folder div) zostanie przeniesiony tam.

1. Przeciągnij ikonę (wiem jak go przeciągnąć, ale jest widoczny tylko w div nadrzędnej, a nie na całej stronie.)
2. upuść na folderze na #navbar (z lewej strony) (Ponownie, nie mogę dowiedzieć się, jak zrobić to droppable ciągu określonego div)
3. Usuń div przeniesiony na oryginalnej treści i wyrównać wszystkie inne div
4. wezwać stronę php, aby przenieść plik związany z tym div do wybranego katalogu

div na środku strony (chcę, aby były przeciągane) to ikony, po przeciągnięciu ich, a następnie upuszczeniu do folderu po lewej stronie, zostanie przeniesiony tam.

Tutaj można zobaczyć jak to wygląda (Lepsza użyciu Firefox): http://narks.xtreemhost.com/

To tylko stronę testową, aby pokazać. Czy ktoś może mi w tym pomóc?

Aby poznać strukturę strony internetowej, zobacz Windows 7 explorer in CSS layout (Dzięki ponownie do Ivan Ivanić za jego cenny 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

bardzo polecam jQueryUI . Prezentacje tutaj: http://jqueryui.com/demos/. Zwróć uwagę na link do ich zaznaczalnych i przeciągalnych obiektów.

Dodatkowo, dzięki szybkiemu skanowaniu problemów, wygląda na to, że bardziej konkretnym rozwiązaniem będzie Sortable, które uwielbiam. Oto dwuliterowa lista do sortowania z wymienianiem list: http://jqueryui.com/demos/sortable/#connect-lists

Aktualizacja: Podajesz również, że musisz opuścić zawierający div i takie. Oto określona strona na granicach dla przeciągania: http://jqueryui.com/demos/draggable/#constrain-movement. Zauważ ogólnie linki do różnych przykładów na prawym pasku bocznym dla każdej z funkcji jQueryUI. Reprezentują wszystko, co jest dostępne od razu po wyjęciu z pudełka. Jeśli potrzebujesz czegoś więcej, wyślij swoją implementację do osób jqueryUI. Kto wie, może stać się kolejną cechą następnej wersji jqueryUI.