Retain Dragable DIV Position

[hoopplaya4]

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:

<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:

 
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!!

[hoopplaya4]

Hmm. Anyone?

[sushi]

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.

[hoopplaya4]

Thanks for the reply. Do you think you can give me an example of how to do this? I'm still very new. Thanks.