ajax drag and drop save

**techker** · 03-02-2009, 01:25 PM

hey guys i git this ajax drag and drop script that i need to modify to save the darged location on the grid..

http://webworkout.info/drag-drop-cus...ag-drop-4.html

you will see what i meen..

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
	<title>Demo 2: Drag and drop</title>
	<link rel="stylesheet" href="css/demos.css" media="screen" type="text/css">
	<style type="text/css">
	/* CSS for the demo. CSS needed for the scripts are loaded dynamically by the scripts */
	#mainContainer{
		width:600px;
		margin:0 auto;
		margin-top:10px;
		border:1px solid #000;
		padding:2px;
	}
	
	#capitals{
	width:200px;
	float:left;
	border:1px solid #000;
	background-color:#E2EBED;
	padding:3px;
	height:750px;
	}
	#countries{
	width:300px;
	float:right;
	margin:2px;
	height:450px;
	}	
	.dragableBox,.dragableBoxRight{
		width:80px;
		height:20px;
		border:1px solid #000;
		background-color:#FFF;		
		margin-bottom:5px;
		padding:10px;
		font-weight:bold;
		text-align:center;
	}
	div.dragableBoxRight{
		height:65px;
		width:110px;
		float:left;
		margin-right:5px;
		padding:5px;
		background-color:#E2EBED;
	}
	.dropBox{
		width:190px;
		border:1px solid #000;
		background-color:#E2EBED;
		height:400px;
		margin-bottom:10px;
		padding:3px;
		overflow:auto;
	}		
	a{
		color:#F00;
	}
		
	.clear{
		clear:both;
	}
	img{
		border:0px;
	}	
	</style>	
	<script type="text/javascript" src="js/drag-drop-custom.js"></script>
</head>
<body>
<form name="form1" method="post" action="div.php">
  <div id="mainContainer">
    <h2>LOCATION</h2>
    <div class="konaBody">DRAG CATEGORIE TO LOCATION</div>
    <div id="capitals">
      <p><b>CATEGORIES</b></p>
      <div id="dropContent3">
        <div class="dragableBox" id="box8">ABS</div>
        <div class="dragableBox" id="box9">ARMS</div>
        <div class="dragableBox" id="box10">CHEST</div>
        <div class="dragableBox" id="box11">LEGS</div>
        <div class="dragableBox" id="box12">SHOULDERS</div>
        <div class="dragableBox" id="box13">MISC</div>
        <div class="dragableBox" id="box14">CARDIO</div>
      </div>
      <div id="dropContent">
        <div class="dragableBox" id="box1">ABS</div>
        <div class="dragableBox" id="box2">ARMS</div>
        <div class="dragableBox" id="box3">CHEST</div>
        <div class="dragableBox" id="box4">LEGS</div>
        <div class="dragableBox" id="box5">SHOULDERS</div>
        <div class="dragableBox" id="box6">MISC</div>
        <div class="dragableBox" id="box7">CARDIO</div>
      </div>
    </div>
    <div id="countries">
      <p>SAVE INFO </p>
      <label>
      <input type="submit" name="button" id="button" value="Submit">
      </label>
      <div id="box108" class="dragableBoxRight"  >1</div>
      <div id="box106" class="dragableBoxRight" >2</div>
      <div id="box107" class="dragableBoxRight" >3</div>
      <div id="box101" class="dragableBoxRight" >4</div>
      <div id="box104" class="dragableBoxRight" >5</div>
      <div id="box105" class="dragableBoxRight" >6</div>
      <div id="box102" class="dragableBoxRight" >7</div>
      <div id="box103" class="dragableBoxRight" >8</div>
    </div>
    <p>
      <label></label>
    </p>
    <div class="clear"></div>
    <div class="konaBody"></div>
    <div id="capitals2">
      <p>
        <label></label>
      </p>
      <div id="dropContent2"></div>
    </div>
  </div>
</form>
<script type="text/javascript">

// Custom drop action for the country boxes
function dropItems(idOfDraggedItem,targetId,x,y)
{
	var targetObj = document.getElementById(targetId);	// Creating reference to target obj
	var subDivs = targetObj.getElementsByTagName('DIV');	// Number of subdivs
	//if(subDivs.length>0 && targetId!='capitals')return;	// Sub divs exists on target, i.e. element already dragged on it. => return from function without doing anything
	var sourceObj = document.getElementById(idOfDraggedItem);	// Creating reference to source, i.e. dragged object
	var numericIdTarget = targetId.replace(/[^0-9]/gi,'')/1;	// Find numeric id of target
	var numericIdSource = idOfDraggedItem.replace(/[^0-9]/gi,'')/1;	// Find numeric id of source
	if(numericIdTarget-numericIdSource==100){	// In the html above, there's a difference in 100 between the id of the country and it's capital(example:
												// Oslo have id "box1" and Norway have id "box101", i.e. 1 + 100.
		sourceObj.style.backgroundColor='';	// Set green background color for dragged object
	}else{
		sourceObj.style.backgroundColor='';	// Reset back to default white background color
	}
	if(targetId=='capitals'){	// Target is the capital box - append the dragged item as child of first sub div, i.e. as child of <div id="dropContent">
		targetObj = targetObj.getElementsByTagName('DIV')[0];	
	}
	targetObj.appendChild(sourceObj);	// Append	
}



var dragDropObj = new DHTMLgoodies_dragDrop();	// Creating drag and drop object

// Assigning drag events to the capitals
dragDropObj.addSource('box1',true);	// Make <div id="box1"> dragable. slide item back into original position after drop
dragDropObj.addSource('box2',true);	// Make <div id="box2"> dragable. slide item back into original position after drop
dragDropObj.addSource('box3',true);	// Make <div id="box3"> dragable. slide item back into original position after drop
dragDropObj.addSource('box4',true);	// Make <div id="box4"> dragable. slide item back into original position after drop
dragDropObj.addSource('box5',true);	// Make <div id="box4"> dragable. slide item back into original position after drop
dragDropObj.addSource('box6',true);	// Make <div id="box4"> dragable. slide item back into original position after drop
dragDropObj.addSource('box7',true);	// Make <div id="box4"> dragable. slide item back into original position after drop
// Assigning drag events to the capitals
dragDropObj.addSource('box8',true);	// Make <div id="box1"> dragable. slide item back into original position after drop
dragDropObj.addSource('box9',true);	// Make <div id="box2"> dragable. slide item back into original position after drop
dragDropObj.addSource('box10',true);	// Make <div id="box3"> dragable. slide item back into original position after drop
dragDropObj.addSource('box11',true);	// Make <div id="box4"> dragable. slide item back into original position after drop
dragDropObj.addSource('box12',true);	// Make <div id="box4"> dragable. slide item back into original position after drop
dragDropObj.addSource('box13',true);	// Make <div id="box4"> dragable. slide item back into original position after drop
dragDropObj.addSource('box14',true);	// Make <div id="box4"> dragable. slide item back into original position after drop

// Assigning drop events on the countries
dragDropObj.addTarget('box101','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box102','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box103','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box104','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box105','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box106','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box107','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box108','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('capitals','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop

dragDropObj.init();	// Initizlizing drag and drop object
</script>
<script>
var content = document.getElementById('box108').innerHTML; 
</script>


</body>
</html>

i was thinking if there was a way to get info from a div tag.

i have tryed:

Code:

<script language="javascript">
var div_thingy = document.getElementById('box101'); //is gives me null
document.write(div_thingy);
var content = document.getElementById('box8').innerHTML; ///does not work
document.write(content);
</script>

**vwphillips** · 03-02-2009, 05:21 PM

I cannot see where ajax is involved

bu have a look at http://www.vicsjavascripts.org.uk/Dr...agDropSort.htm which uses a cookie to remember the last sorted positions

**techker** · 03-02-2009, 06:01 PM

it doesnt really work..man is tis complicated

**Falkon303** · 03-02-2009, 06:43 PM

onsuccess is what you want to set..... google "serialize".

**techker** · 03-02-2009, 10:41 PM

Generates a storable representation of a value

This is useful for storing or passing PHP values around without losing their type and structure.

To make the serialized string into a PHP value again, use unserialize().

i don't see what this would be help for?

**Falkon303** · 11-25-2009, 01:14 AM

Originally Posted by techker

Generates a storable representation of a value

This is useful for storing or passing PHP values around without losing their type and structure.

To make the serialized string into a PHP value again, use unserialize().

i don't see what this would be help for?

you'd send this to a cookie or database.

Thread: ajax drag and drop save

Thread Tools

Search Thread

ajax drag and drop save

Bookmarks

Bookmarks

Posting Permissions