DP_PanelManager:
Drag-and-Drop with Ordering

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

Try dragging the panels along the row. Notice how the panels automatically rearrange themselves.

The code for the above form and the related script follows:

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

	PanelManager = new DP_PanelManager();
	BodyPanelManager = new DP_PanelManager();

		// Get the Target Pos
	var TargetPos = PanelManager.addPanel("ExamplePanel").getPosition();
		// Create Panel out of the Body Element
	myBody = BodyPanelManager.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([PanelTPos, CurMousePos[1] - dragger.ClickOffset[1]]);
		};
	};
		// Create containers for the Dragged object
	dragger.Element = null;
	dragger.ClickOffset = [0,0];

		// Set Panel Constants
	var PanelCnt = 7;
	var PanelLPos = TargetPos[1];
	var PanelTPos = TargetPos[0] + 10;
	var PanelH = 40;
	var PanelMargin = 10;
	var OrderSeed = 100;

		// Create Panels
	var CurPanelLPos = PanelLPos;
	for ( var Cnt = 1; Cnt <= PanelCnt; Cnt++ ) {
		var PnlId = "Pnl_" + "_" + Cnt;
		var CurPnl = PanelManager.newPanel(PnlId);
			// Style the panel
		CurPnl.style.backgroundColor = "green";
		CurPnl.style.border = "3px solid black";
		CurPnl.style.color = "white";
		CurPnl.style.fontWeight = "bold";
		CurPnl.style.padding = "0px";
			// Load the Content
		CurPnl.load("<div style='text-align: center;'>" + Cnt + "</div>");
			// Display the panel
		CurPnl.setDisplay("show");
			// Set the size and position
		CurPanelW = getRand(50,20);
		CurPnl.setSize([PanelH, CurPanelW]);
		CurPnl.setPosition([PanelTPos, CurPanelLPos]);
		CurPanelLPos = CurPanelLPos + CurPnl.getSize()[1] + PanelMargin;
			// Register Events
		CurPnl.addEvent("mousedown", startDrag);
		// CurPnl.addEvent("mouseout", endDrag);
		CurPnl.addEvent("mouseup", endDrag);
	};

		// Start Drag Event
	function startDrag(Event) {
			// Bring the Current element to the top (prevent mouse events getting lost from overlap)
		this.setOrder(OrderSeed++);
			// 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];
			// Get the Order of the panels
		var PanelList = PanelManager.getPanelList("left");
			// Loop over the List
		var CurLPos = PanelLPos;
		for ( var Cnt=0; Cnt < PanelList.length; Cnt++ ) {
			if ( PanelList[Cnt].id != "ExamplePanel" ) {
				PanelList[Cnt].setPosition([PanelTPos, CurLPos], 0, 200);
				CurLPos = CurLPos + PanelList[Cnt].getSize()[1] + PanelMargin;
			};
		};

	};

		// Random Number Generator
	function getRand(Max, Min) {
		if ( typeof Min != 'number') { Min = 0 };
		Max = Max + 1;
		return (Math.floor( Math.random() * ( Max - Min ) ) + Min);
	};

</script>