PDA

View Full Version : 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-custom/demo-drag-drop-4.html

you will see what i meen..


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


<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/DragDropSort/DragDropSort.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
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.