Results 1 to 6 of 6

Thread: ajax drag and drop save

  1. #1
    Join Date
    May 2006
    Posts
    46
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default ajax drag and drop save

    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>

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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

  3. #3
    Join Date
    May 2006
    Posts
    46
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    it doesnt really work..man is tis complicated

  4. #4
    Join Date
    Sep 2008
    Posts
    119
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Default

    onsuccess is what you want to set..... google "serialize".
    Last edited by Falkon303; 03-02-2009 at 06:51 PM.
    document.write is document.wrong

  5. #5
    Join Date
    May 2006
    Posts
    46
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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?

  6. #6
    Join Date
    Sep 2008
    Posts
    119
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by techker View Post
    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.
    document.write is document.wrong

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •