30 Days of Mootools 1.2 Tutorials – Day 12 – Drag and Drop using Drag.Move

var myDrag = new Drag.Move(dragElement, {
	        // Drag.Move Options
		droppables: dropElement,
		container: dragContainer,
		// Drag Options
		handle: dragHandle,
		// Drag.Move Events
                // the Drag.Move events pass the dragged element,
                // and the dropped into droppable element
		onDrop: function(el, dr) {
                        //will alert the id of the dropped into droppable element
                        alert(dr.get('id'));
		},
                // Drag Events
                // Drag events pass the dragged element
                onComplete: function(el) {
			alert(el.get('id'));
		}
	});

//here we define a single element by id
var dragElement = $('drag_element');
//here we define an array of elements by class
var dropElements = $$('.drag_element');
 
var dragContainer = $('drag_container');
//now we set up our Drag.Move object
var myDrag = new Drag.Move(dragElement , {
	        // Drag.Move Options
                // set up our droppables element with the droppables var we defined above
		droppables: dropElements ,
               // set up our container element with the container element var
		container: dragContainer
	});

var dragContainer = $('drag_container');
 
var myDrag = new Drag.Move(dragElement , {
	        // Drag.Move Options
		droppables: dropElements ,
		container: dragContainer ,
	        // Drag.Move Options
                // the Drag.Move functions will pass the draggable element ('el' in this case)
                // and the droppable element the draggable is interacting with ('dr' here)
                onDrop: function(el, dr) {
                        // roughly translates to, "if the element you drop onto is NOT a droppable element
			if (!dr) {
                            //dont do anything
                        }
                        // otherwise (logically meaning, if the element you drop onto IS droppable
                        // do this other thing here
        	        else {
			    //have something happen when you drop on a droppable
			};
		},
		onLeave: function(el, dr) {
			// this will fire when a draggable leaves a droppable element
		},
		onEnter: function(el, dr) {
			// this will fire when a draggable enters a droppable element
		}
	});

var myDrag = new Drag.Move(dragElement , {
	        // Drag Options
		snap: 10
	});

// here we are setting up an array using a class selector
// this will let us easily add multiple handles if we decide to have multiple draggables
var dragHandle = $('drag_handle');
var myDrag = new Drag.Move(dragElement , {
	        // Drag Options
		handle: dragHandle
	});

var myDrag = new Drag.Move(dragElement , {
	        // Drag Options
                // Drag options will pass the dragged element as a parameter
		onStart: function(el) {
                    // put whatever you want to happen on start in here
               }
	});

var myDrag = new Drag.Move(dragElement , {
	        // Drag Options
                // Drag options will pass the dragged element as a parameter
		onDrag: function(el) {
                    // put whatever you want to happen on drag in here
               }
	});

var myDrag = new Drag.Move(dragElement , {
	        // Drag Options
                // Drag options will pass the dragged element as a parameter
		onComplete: function(el) {
                    // put whatever you want to happen on complete
               }
	});

window.addEvent('domready', function() {
	var dragElement = $('drag_me');
	var dragContainer = $('drag_cont');
	var dragHandle = $('drag_me_handle');
	var dropElement = $$('.draggable');
	var startEl = $('start');
	var completeEl = $('complete');
	var dragIndicatorEl = $('drag_ind');
	var enterDrop = $('enter');
	var leaveDrop = $('leave');
	var dropDrop = $('drop_in_droppable');
 
	var myDrag = new Drag.Move(dragElement, {
	    // Drag.Move options
		droppables: dropElement,
		container: dragContainer,
		// Drag options
		handle: dragHandle,
		// Drag.Move Events
		onDrop: function(el, dr) {
			if (!dr) { }
 
        	        else {
				dropDrop.highlight('#FB911C'); //flashes orange
				el.highlight('#fff'); //flashes white
				dr.highlight('#667C4A'); //flashes green
			};
		},
		onLeave: function(el, dr) {
			leaveDrop.highlight('#FB911C'); //flashes orange
		},
		onEnter: function(el, dr) {
			enterDrop.highlight('#FB911C'); //flashes orange
		},
		// Drag Events
		onStart: function(el) {
			startEl.highlight('#FB911C'); //flashes orange
		},
		onDrag: function(el) {
			dragIndicatorEl.highlight('#FB911C'); //flashes orange
		},
		onComplete: function(el) {
			completeEl.highlight('#FB911C'); //flashes orange
		}
	});
});

/* this is generally a good idea */
body {
	margin: 0;
	padding: 0;
}
 
/* make sure the draggable element has "position: absolute"
*/ and then top and left are set for the start position
#drag_me {
	width: 100px;
	height: 100px;
	background-color: #333;
	position: absolute;
	top: 0;
	left: 0;
}
 
 
#drop_here {
	width: 200px;
	height: 200px;
	background-color: #eee;
}
 
/* make sure the drag container is set with position relative */
#drag_cont {
	background-color: #ccc;
	height: 600px;
	width: 500px;
	position: relative;
	margin-top: 100px;
	margin-left: 100px;
}
 
 
#drag_me_handle {
	width: 100%;
	height: auto;
	background-color: #666;
}
 
#drag_me_handle span {
	display: block;
	padding: 5px;
}
 
 
.indicator {
	width: 100%;
	height: auto;
	background-color: #0066FF;
	border-bottom: 1px solid #eee;
}
 
.indicator span {
	padding: 10px;
	display: block;
}
 
.draggable {
	width: 200px;
	height: 200px;
	background-color: blue;
}

<div id="drag_cont">
    <div id="start" class="indicator"><span>Start</span></div>
    <div id="drag_ind" class="indicator"><span>Drag</span></div>
    <div id="complete" class="indicator"><span>Complete</span></div>
    <div id="enter" class="indicator"><span>Enter Droppable Element</span></div>
    <div id="leave" class="indicator"><span>Leave Droppable Element</span></div>
    <div id="drop_in_droppable" class="indicator"><span>Dropped in Droppable Element</span></div>
    <div id="drag_me">
        <div id="drag_me_handle"><span>handle</span></div>
    </div>
 
    <div id="drop_here" class="draggable"></div>
</div>