DP_PanelManager:
Drag-and-Drop with Collision Detection

This is an example of implementing drag-and-drop and collision detection functionality on a web page using the DP_PanelManager component provided by the DepressedPress.

Drag the smaller, blue panel over the larger, green panel: when a collision between the panels is detected the smaller panel will change color. Try dragging the smaller, blue panel over the text to see the opacity effect.

The distance between the two panels (as returned from the "getDistanceFrom()" method) will be displayed in the larger panel. Note how it changes as you move the panel around.

The code for the example:

<div id="ExamplePanel" style="text-align:center; height: 100px;"></div>
<script type="text/javascript">

	PanelManager = new DP_PanelManager();

		// Get the Target Pos
	var TargetPos = PanelManager.addPanel("ExamplePanel").getPosition();
		// Create Panel out of the Body Element
	myBody = PanelManager.addPanel("BODY");
		// Capture mouse movements
	myBody.addEvent("mousemove",  dragger);

		// The dragger function - moves whatever element is in the "dragger.Element" container to match the mouse position
	function dragger(Event) {
		if ( dragger.Element ) {
			CurMousePos = PanelManager.getMousePosition(Event);
			dragger.Element.setPosition([CurMousePos[0] - dragger.ClickOffset[0], CurMousePos[1] - dragger.ClickOffset[1]]);
				// Test Collision Detection
			if ( dragger.Element.hasCollisionWith("myStaticPanel") ) {
				dragger.Element.style.backgroundColor = "red"
			} else {
				dragger.Element.style.backgroundColor = "blue"
			};
			myStaticPanel.load("<div style='text-align: center'>" + dragger.Element.getDistanceFrom("myStaticPanel") + "</div>");
		};
	};
		// Create containers for the Dragged object
	dragger.Element = null;
	dragger.ClickOffset = [0,0];

		// Create a Static Panel
	mySP = PanelManager.newPanel("myStaticPanel");
		// Style the Panel
	mySP.style.backgroundColor = "green";
	mySP.style.color = "white";
	mySP.style.fontWeight = "bold";
		// Size and position
	mySP.setPosition([TargetPos[0] + 10, TargetPos[1] + 175]);
	mySP.setSize([51, 101]);
		// Display the panel
	mySP.setDisplay("show");

		// Create a draggable Panel
	myDP = PanelManager.newPanel("myDragPanel");
		// Style the Panel
	myDP.style.backgroundColor = "blue";
	myDP.style.color = "white";
	myDP.style.fontWeight = "bold";
		// Size and position
	myDP.setPosition([TargetPos[0] + 10, TargetPos[1] + 300]);
	myDP.setSize([51, 51]);
		// Load Content
	myDP.load("<div style='text-align: center'>Drag Me!</div>");
		// Display the panel
	myDP.setDisplay("show");
		// Register Events
	myDP.addEvent("mousedown", startDrag);
	myDP.addEvent("mouseup", endDrag);


		// Start Drag Event
	function startDrag(Event) {
			// Set the Current Panel Opacity
		this.setOpacity(50, 0, 100);
			// Set the dragger
		dragger.Element = this;
			// Get the Current Mouse Position
		var CurMousePos = PanelManager.getMousePosition(Event);
			// Get the Current Panel Position
		var CurPanelPos = this.getPosition();
			// Calculate the Panel Click Position
		dragger.ClickOffset = [(CurMousePos[0] - CurPanelPos[0]), (CurMousePos[1] - CurPanelPos[1])];
	};
	// End Drag Event
	function endDrag(Event) {
		 // Set the Current Panel Opacity
		this.setOpacity(100, 0, 100);
		 // Reset the dragger properties (nothing is being dragged
		dragger.Element = null;
		dragger.ClickOffset = [0,0];
	};
</script>