Drag and drop divs across page?

Question

I'm building a single page which consists of a list (of div's) on the left and a grid (of div's) on the right. I would like to add the ability for a user to click and drag one of the list items and drop it over one of the grid boxes. I'm not using HTML5, but I know it comes with this native capability. I'm trying to avoid HTML 5 at the moment.

enter image description here

The above illustration shows my basic page layout and the red line shows how things will be dragged/dropped. Any of the list items may be dragged into any of the grid boxes. The grid cells are dynamically sized (resizing the page will resize the grid cells) to where everything always fits in the page at any given time, no scroll bars. Each grid cell has an index starting from 0, counting from left-to-right then top-to-bottom. I need to pair the list item ID (could be any number) with its corresponding grid cell index (0-8 in this case).

I don't know even the first thing I need to do to make this drag/drop possible. I just know the very core basics of HTML - so I need some example to demonstrate this, not just some brief explanation of use this and that, because I won't know what this and that means. All the tutorials I can find are related to either HTML 5 in particular or related to just moving a list item within the same list - but in my case I need to move it outside the list.

Here's the page structure which I am working with below. Note that the list items are dynamically added upon page load...




    View Cameras
    
    


    
        View Cameras
    
    
        
            1) Click box to select view:
            
                
                    
                        0

                        1

                        2

                    
                    
                        3

                        4

                        5

                    
                    
                        6

                        7

                        8

                    
                
            
            2) Select cam to show in selected box:
            
                
                    
                        [No Camera]
                    
                
            
            3) Can't see the cameras? Click Here.

PS - there will be a missing picture Cam.jpg

UPDATE

Thanks to the help of roflmao's effort on the answer below, I got everything working fine now. Just a glitch where when I drag an item, it highlights everything on the page, but that's another story.

jstrong · Accepted Answer

Okay, so the first thing you'll want to do right off the bat is use a javascript library, either jQuery or Prototype (jQuery being the more popular one). Manipulating standard JS the way you are is begging for cross-browser compatibility issues.

Once you've put in jQuery, you can just use the jQuery UI library and use the draggable and droppable interfaces. Check this page out.

The code will look something like this: http://jsfiddle.net/CZNhP/21/

$(function() {
    $("#menu li").draggable({reset: true});

    $("#container").droppable({ 
        drop: function(event, ui) {
            // Here you instantiate your media object.
            // You can access the place your object was dropped on with
            // "this" and the draggged item with "ui.draggable"
        }
    });    
});

Drag and drop divs across page?

Answers (1)

Related Questions