Geek Answers Handbook

Selectable & Draggable jQuery to make Windows Explorer-like window

Now I come across another that I cannot figure out how to do this.

I'm new to jQuery, and I'm trying to drag and drop an icon, and when you put it in a folder (.folder div), it will be moved there.

  • Drag the icon (I know how to drag it, but it is visible only in the parent div, and not on the entire web page.)
  • Put the folder in #navbar (left) (Again, I can't figure out how to make it inaccessible to a specific div)
  • Delete the div moved around the original content and rebuild all the other divs
  • Call php page to move the file associated with this div to the selected directory

the div in the center of the page (I want them to be dragged) are the icons, when you drag them and then drop them into the folder on the left, they will be moved there.

Here you can see how it looks (it is better to use Firefox): http://narks.xtreemhost.com/

This is just a test page to show you. Can anyone help me with this please?

To find out the structure of the web page, see Windows 7 Explorer in the CSS layout (Thanks again to Ivan Ivanich for his valuable help1)

EDIT jQuery Drag and 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) {
    }
});
+5
source share
1 answer

jqueryui. : http://jqueryui.com/demos/. Selectable and Draggable.

, - , , , . : http://jqueryui.com/demos/sortable/#connect-lists

: , div .. draggable: http://jqueryui.com/demos/draggable/#constrain-movement. , jQueryUI. , . , jqueryUI. , jqueryUI.

+4

More articles:


All Articles