www.webdeveloper.com
Results 1 to 4 of 4

Thread: Retain Dragable DIV Position

  1. #1
    Join Date
    Nov 2008
    Posts
    13

    Retain Dragable DIV Position

    Hi All,

    I'm working on creating a portal with several draggable DIVs. This is done with Mootools. I've got the main portion of the portal setup. However, I'd like each session to remember (via PHP and MySql possibly) the positions of the DIVs when users log back in.

    How might I go about achieving something like this?

    I definitely appreciate the help in putting this together!

    Here's the HTML portion:

    PHP Code:
    <table cellspacing="30px" id="boxContainer">
            <
    tr>
                <
    td>
                    <
    div class="box">
                        <
    div class="boxHandle">Recent Messages</div>
                        <
    div class="boxContent">
                            <
    p>Recent Messages go in here.</p>
                        </
    div>
                    </
    div>
                    <
    div class="box">
                        <
    div class="boxHandle">Recent Practices</div>
                        <
    div class="boxContent">
                            <
    p>Recent Practice</p>
                        </
    div>
                    </
    div>
                    <
    div class="box">
                        <
    div class="boxHandle">Two</div>
                        <
    div class="boxContent">Hello World!</div>
                    </
    div>
                </
    td>
                <
    td>
                    <
    div class="box">
                        <
    div class="boxHandle">Video</div>
                        <
    div class="boxContent">Most Recent Video
                        
    <p>Recent Video Goes Here</p>
                        </
    div>
                    </
    div>
                    <
    div class="box">
                        <
    div class="boxHandle">Three</div>
                        <
    div class="boxContent">Hello World!</div>
                    </
    div>
                    <
    div class="box">
                        <
    div class="boxHandle">Four</div>
                        <
    div class="boxContent">Hello World!</div>
                    </
    div>
                </
    td>
                <
    td>
                    <
    div class="box">
                        <
    div class="boxHandle">Three</div>
                        <
    div class="boxContent">Hello World!</div>
                    </
    div>
                    <
    div class="box">
                        <
    div class="boxHandle">Four</div>
                        <
    div class="boxContent">Hello World!</div>
                    </
    div>
                </
    td>
            </
    tr>
        </
    table

    And here is the JS:

    Code:
     
    window.onload=function(){
    	// boxes shared vars
    
    	var draggables = $('boxContainer').getElements('.box');
    	
    	var boxMarker = new Element('div', {
    		'class': 'boxMarker',
    		'styles': {
    			'display': 'none'
    		}
    	}).inject($E('body'));
    	var boxCols = $('boxContainer').getFirst().getChildren().getChildren()[0];
    
    	// boxes drag behavior for each
    	draggables.each(function(el){		
    		var minimizeFx = new Fx.Slide(el.getElement('.boxContent'));
    		
    		// Create left span
    		var title = el.getElement('.boxHandle').innerHTML;
    		el.getElement('.boxHandle').empty();
    		var el2 = new Element('span', {
    			'class': 'boxHandleLeft',
    			'styles': {
    				'float': 'left'
    			}
    		}).inject(el.getElement('.boxHandle'));
    		el2.innerHTML = title;
    		
    		el2.ondblclick = function(e) {
    			new Event(e).stop();
    			minimizeFx.toggle();
    		};
    		
    		// Create right span
    		var el2 = new Element('span', {
    			'class': 'boxHandleRight',
    			'styles': {
    				'float': 'right'
    			}
    		}).inject(el.getElement('.boxHandle'));
    		
    		// Create clear
    		var el2 = new Element('br', {
    			'styles': {
    				'clear': 'both'
    			}
    		}).inject(el.getElement('.boxHandle'));
    		
    		// Create minimize button
    		var el2 = new Element('a', {
    			'title': 'Minimize',
    			'styles': {
    				'z-index': 1, 
    				'cursor': 'pointer'
    			}
    		}).inject(el.getElement('.boxHandleRight'));
    		el2.innerHTML = '<img src="min.gif"/>';
    		
    		el2.onclick = function(e) {
    			new Event(e).stop();
    			minimizeFx.toggle();
    		};
    
    		// Create delete button
    		var e2 = new Element('a', {
    			'title': 'Delete',
    			'styles': {
    				'z-index': 1, 
    				'cursor': 'pointer'
    			}
    		}).inject(el.getElement('.boxHandleRight'));
    		e2.innerHTML = '<img src="x.gif"/>';
    		e2.onclick = function(e) {
    			new Event(e).stop();
    			var fx = el.effects({duration: 500, transition: Fx.Transitions.Quart.easeOut});
    			fx.start({
    				'opacity': 0
    			}).chain(function() {
    				el.remove();
    			});
    		};
    
    		// Make each box draggable using the boxHandle
    		el.makeDraggable({
    			handle: el.getElement('.boxHandleLeft'),
    			'onBeforeStart': function() {
    				// Introduce the marking box, change the draging box to absolute
    				// The order the next 4 lines seems to be important for it to work right in Firefox
    				boxMarker.injectAfter(el).setStyles({'display': 'block', 'height': el.getStyle('height')});
    				el.setStyles({'opacity': '0.55', 'z-index': '3', 'width': el.getStyle('width'), 'position': 'absolute'});
    				el.inject($E('body'));
    				el.setStyles({'top': boxMarker.getCoordinates().top, 'left': boxMarker.getCoordinates().left});
    			},
    			'onComplete': function() {
    				// Replace the draging box
    				if (window.gecko) {
    					el.injectBefore(boxMarker).setStyles({'opacity': '1', 'z-index': '1', 'margin': '0 -5px 10px 0', 'position': 'relative', 'top': '0', 'left': '0'});
    				} else {
    					el.injectBefore(boxMarker).setStyles({'opacity': '1', 'z-index': '1', 'margin': '0 0 10px 0', 'position': 'relative', 'top': '0', 'left': '0'});
    				}
    				// Remove the marking box
    				boxMarker.inject($E('body')).setStyles({'display': 'none'});
    			},
    			'onDrag': function() {
    				var mouseX = this.mouse.now.x; var mouseY = this.mouse.now.y;
    				
    				// Work from first column out and top down
    				boxTargetCol = boxCols[0];
    				boxTargetDiv = null;
    				
    				// X - Which column?
    				boxCols.each(function(el, i){
    					if (mouseX > el.getCoordinates().left) 
    						boxTargetCol = el;
    					/*if (boxCols[0] == null)
    						$('debug').innerHTML += el.getChildren() + '\n';*/
    				});
    				
    				// Y - If we're half way or more past this box then insert it after this one
    				boxTargetCol.getChildren().each(function(el, i){
    					if (mouseY > (el.getCoordinates().top + Math.round(el.getCoordinates().height / 2))) 
    						boxTargetDiv = el;
    				});
    
    				// Place the marker
    				if (boxTargetDiv == null) {
    					// On top
    					if (boxTargetCol.getFirst() != boxMarker) { 
    						// make sure a child element exists within the column
    						if (boxTargetCol.getFirst() != null) {
    							boxMarker.injectBefore(boxTargetCol.getFirst());
    						// otherwise we'll inject it as the only element.
    						} else {
    							boxMarker.inject(boxTargetCol);
    						}
    					}
    				} else {
    					// Or after a box
    					if ((boxTargetDiv != boxMarker) && (boxTargetDiv != boxMarker.getPrevious())) 
    						boxMarker.inject(boxTargetDiv, 'after');
    				}
    			}
    		});
    	});
    }
    Thank you for your help!!

  2. #2
    Join Date
    Nov 2008
    Posts
    13
    Hmm. Anyone?

  3. #3
    Join Date
    Mar 2008
    Posts
    123
    yeah, after each div is dragged get the x and y coordinates of the mouse. Save them in a cookie or in a mysql table for that user. Next time the user logs in check for the cookie, or table and add a position:absolute to the divs (according to the x and y for that div) if they exist.

  4. #4
    Join Date
    Nov 2008
    Posts
    13
    Thanks for the reply. Do you think you can give me an example of how to do this? I'm still very new. Thanks.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles