Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 26
  1. #1
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts

    Internet Explorer IE is killing me [resolved]

    I have a div that controlls a list and each li contains a picture, and when i make another list that sits next to it it works fine in FF and then when you go too IE the second list that sits next to the first one drops completeley off the actual div. here is my code

    html
    Code:
    
    <div id="mainContainer">
    		<!-- ONE <UL> for each "room" -->
    		
    <div style="float:left; clear:left;">		
    			<p>New Uploads</p>
    			<ul id="New_Uploads_not_stored1" style="float:left; clear:left;">
                <li id="pic11"><img src="gfx/drag_column_picture/Pic11.jpg"></li>
                <li id="pic12"><img src="gfx/drag_column_picture/pic12.jpg"></li>
                <li id="pic13"><img src="gfx/drag_column_picture/pic13.jpg"></li>
               
              </ul>
                <ul id="New_Uploads_not_stored2">
                <li id="pic11"><img src="gfx/drag_column_picture/Pic11.jpg"></li>
                <li id="pic12"><img src="gfx/drag_column_picture/pic12.jpg"></li>
                <li id="pic13"><img src="gfx/drag_column_picture/pic13.jpg"></li>
               
              </ul>
    </div>
            
            <div style="float:right;">	
    			<p>Delete Column</p>
    			<ul id="New_Uploads_not_stored" style="float:left; clear:left;">
                <li id="pic11"><img src="gfx/drag_column_picture/Pic11.jpg"></li>
                <li id="pic12"><img src="gfx/drag_column_picture/pic12.jpg"></li>
                <li id="pic13"><img src="gfx/drag_column_picture/pic13.jpg"></li>
          </ul>
          <ul id="New_Uploads_not_stored2">
                <li id="pic11"><img src="gfx/drag_column_picture/Pic11.jpg"></li>
                <li id="pic12"><img src="gfx/drag_column_picture/pic12.jpg"></li>
                <li id="pic13"><img src="gfx/drag_column_picture/pic13.jpg"></li>
          </ul>
    </div>
    heres the css

    Code:
    div#mainContainer{	/* Right column DIV */
    width:600px;
    loat:right;
    height:inherit;	
    }
    
    #mainContainer div{	/* Parent <div> of small boxes */
    height:660px;
    margin-bottom:10px;
    margin-top:0px;
    border:1px solid #999;
    /* CSS HACK */
    width: 280px;	/* IE 5.x */
    width/* */:/**/280px;	/* Other browsers */
    width: /**/280px;
    }
    
    #mainContainer div ul{
    padding:1px;
    }
    	
    #mainContainer div p{	/* Heading above small boxes */
    margin:0px;
    padding:0px;
    padding-left:12px;
    font-weight:bold;
    background-color:#317082;	
    color:#FFF;	
    margin-bottom:5px;
    }
    	
    #mainContainer ul{	/* Small box in right column ,i.e <ul> */
    width:152px;
    height:80px;	
    border:0px;	
    margin-bottom:0px;
    overflow:hidden;
    }
    I know its not the cleanest code and i wish i could give a link but hopefully you can work with this and let me know why IE doesnt do this correctly.

    If there is anything else please let me know

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    This is the first thing I saw:

    loat:right;
    Then I checked your snippet in the validator and it shows Failed validation, 77 Errors. I realize you're aware it's "not the cleanest code" but some things need to be done right to work.
    ============

    These seem to be conflicting:
    Code:
    div#mainContainer{	/* Right column DIV */
    width:600px;
    loat:right;
    height:inherit;	
    }
    
    #mainContainer div{	/* Parent <div> of small boxes */
    height:660px;
    margin-bottom:10px;
    margin-top:0px;
    border:1px solid #999;
    /* CSS HACK */
    width: 280px;	/* IE 5.x */
    width/* */:/**/280px;	/* Other browsers */
    width: /**/280px;
    }
    Have a look at this instead:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    div#mainContainer{	/* Right column DIV */
    	width:600px;
    	float:right;
    	height:inherit;
    	background: #CCFF00;
    }
    #one {
    	float: left;
    }
    #two {
    	float: right;
    }	
    #mainContainer p{	/* Heading above small boxes */
    margin:0 0 5px 0;
    padding:0 0 0 12px;
    font-weight:bold;
    background:#317082;	
    color:#FFF;	
    }	
    #mainContainer ul{	/* Small box in right column ,i.e <ul> */
    width:152px;
    height:80px;	
    background: #ccc;
    border:none;	
    margin:0px;
    overflow:hidden;
    }
    </style>
    </head>
    <body>
    <div id="mainContainer">
    		<!-- ONE <UL> for each "room" -->
    		
    <div id="one">		
    			<p>New Uploads</p>
      <ul>
        <li id="pic11"><img src="gfx/drag_column_picture/Pic11.jpg" /></li>
                <li id="pic12"><img src="gfx/drag_column_picture/pic12.jpg" /></li>
                <li id="pic13"><img src="gfx/drag_column_picture/pic13.jpg" /></li>
               
      </ul>
                <ul>
                <li id="pic11"><img src="gfx/drag_column_picture/Pic11.jpg" /></li>
                <li id="pic12"><img src="gfx/drag_column_picture/pic12.jpg" /></li>
                <li id="pic13"><img src="gfx/drag_column_picture/pic13.jpg" /></li>
               
      </ul>
    <!--end one--></div>
            
            <div id="two">	
    		  <p>Delete Column</p>
    		<ul>
                <li id="pic11"><img src="gfx/drag_column_picture/Pic11.jpg" /></li>
                <li id="pic12"><img src="gfx/drag_column_picture/pic12.jpg" /></li>
              <li id="pic13"><img src="gfx/drag_column_picture/pic13.jpg" /></li>
          	</ul>
          	<ul>
                <li id="pic11"><img src="gfx/drag_column_picture/Pic11.jpg" /></li>
                <li id="pic12"><img src="gfx/drag_column_picture/pic12.jpg" /></li>
              <li id="pic13"><img src="gfx/drag_column_picture/pic13.jpg" /></li>
          	</ul>
    <!--end two--></div>
    <!--end mainContainer--></div>
    </body>
    </html>
    Errors from your ul are still there. See my suggestion and links about validating in my sig below.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    well i can give you my whole code and you can take a look at it because i only had one error with my whole code, in fact thats better that way u can load it into a .html file and look

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    	<title>Drag and Drop to the columns</title>
    	
    
    
    	
    	
    	<style type="text/css">
    	body{
    		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;	/* Font to use */
    		background-color:#E2EBED;
    	}
    	#footer{
    		height:30px;
    		vertical-align:middle;
    		text-align:right;
    		clear:both;
    		padding-right:3px;
    		background-color:#317082;
    		margin-top:2px;
    		width:790px;
    	}
    	#footer form{
    		margin:0px;
    		margin-top:2px;
    	}
    	#dragDropContainer{	/* Main container for script */
    		width:900px;
    		height:800px;
    		border:1px solid #317082;
    		background-color:#FFF;
    		-moz-user-select:none;
    		
    	}
    	#dragDropContainer ul{	/* General rules for all <ul> */
    		margin-top:0px;
    		margin-left:0px;
    		margin-bottom:0px;
    		padding:2px;
    	}
    	
    	#dragDropContainer li,#dragContent li,li#indicateDestination{	/* Movable items, i.e. <LI> */
    		list-style-type:none;
    		width:99px;
    		height:76px;
    		background-color:#EEE;
    		border:1px solid #000;
    		padding:2px;
    		margin-bottom:2px;
    		cursor:move;
    		font-size:0.9em;
    	}
    	
    	li#indicateDestination{	/* Box indicating where content will be dropped - i.e. the one you use if you don't use arrow */
    		border:1px dotted #600;	
    		background-color:#FFF;
    	}
    
    	
    	/* LEFT COLUMN CSS */
    	div#listOfItems{	/* Left column "Page Pictures" */
    		float:left;
    		padding-left:10px;
    		padding-right:10px;
    		height:660px;
    		/* CSS HACK */
    		width: 280px;	/* IE 5.x */
    		width/* */:/**/280px;	/* Other browsers */
    		width: /**/280px;
    				
    	}
    	#listOfItems ul{	/* Left(Sources) column <ul> */
    		height:600px;
    			
    
    	}
    	#listOfItems ul li{	/* Left(Sources) column <ul> */
    		
    			
    
    	}
    		
    	div#listOfItems div{
    		border:1px solid #999;		
    	}
    	div#listOfItems div ul{	/* Left column <ul> */
    		
    		height:650px;	/* Space at the left of list - the arrow will be positioned there */
    	}
    	#listOfItems div p{	/* Heading above left column */
    		margin:0px;	
    		font-weight:bold;
    		padding-left:12px;
    		background-color:#317082;	
    		color:#FFF;
    		margin-bottom:5px;
    	}
    	/* END LEFT COLUMN CSS */
    	
    	#dragDropContainer .mouseover{	/* Mouse over effect DIV box in right column */
    		background-color:#E2EBED;
    		border:1px solid #317082;
    	}
    	
    	/* Start main container CSS */
    	
    	div#mainContainer{	/* Right column DIV */
    		width:600px;
    		float:right;
    		height:inherit;	
    	}
    	#mainContainer div{	/* Parent <div> of small boxes */
    		height:660px;
    	
    		margin-bottom:10px;
    		margin-top:0px;
    		border:1px solid #999;
    
    		/* CSS HACK */
    		width: 280px;	/* IE 5.x */
    		width/* */:/**/280px;	/* Other browsers */
    		width: /**/280px;
    				
    	}
    	#mainContainer div ul{
    		padding:1px;
    	
    	}
    	
    	#mainContainer div p{	/* Heading above small boxes */
    		margin:0px;
    		padding:0px;
    		padding-left:12px;
    		font-weight:bold;
    		background-color:#317082;	
    		color:#FFF;	
    		margin-bottom:5px;
    	}
    	
    	#mainContainer ul{	/* Small box in right column ,i.e <ul> */
    		width:152px;
    		height:80px;	
    		border:0px;	
    		margin-bottom:0px;
    		overflow:hidden;
    		
    	}
    	
    	#dragContent{	/* Drag container */
    		position:absolute;
    		width:150px;
    		height:20px;
    		display:none;
    		margin:0px;
    		padding:0px;
    		z-index:2000;
    	}
    
    	#dragDropIndicator{	/* DIV for the small arrow */
    		position:absolute;
    		width:7px;
    		height:10px;
    		display:none;
    		z-index:1000;
    		margin:0px;
    		padding:0px;
    	}
    	</style>
    	<style type="text/css" media="print">
    	div#listOfItems{
    		display:none;
    	}
    	body{
    		background-color:#FFF;
    	}
    	img{
    	width:99px;
    	height:76px;
    	border:0px;
    	padding:0px;
    	margin:0px;
    	}
    	#dragDropContainer{
    		border:0px;
    		width:100%;
    		
    	}
    	</style>		
    	<script type="text/javascript">
    	/************************************************************************************************************
    		
    		
    	
    		
    		var boxSizeArray = [12,12,12,12,12];	// Array indicating how many items there is rooom for in the right column ULs
    	
    	var arrow_offsetX = -5;	// Offset X - position of small arrow
    	var arrow_offsetY = 0;	// Offset Y - position of small arrow
    	
    	var arrow_offsetX_firefox = -6;	// Firefox - offset X small arrow
    	var arrow_offsetY_firefox = -13; // Firefox - offset Y small arrow
    	
    	var verticalSpaceBetweenListItems = 3;	// Pixels space between one <li> and next	
    											// Same value or higher as margin bottom in CSS for #dragDropContainer ul li,#dragContent li
    	
    											
    	var indicateDestionationByUseOfArrow = false;	// Display arrow to indicate where object will be dropped(false = use rectangle)
    
    	var cloneSourceItems = false;	// Items picked from main container will be cloned(i.e. "copy" instead of "cut").	
    	var cloneAllowDuplicates = true;	// Allow multiple instances of an item inside a small box(example: drag Student 1 to team A twice
    	
    	/* END VARIABLES YOU COULD MODIFY */
    	
    	var dragDropTopContainer = false;
    	var dragTimer = -1;
    	var dragContentObj = false;
    	var contentToBeDragged = false;	// Reference to dragged <li>
    	var contentToBeDragged_src = false;	// Reference to parent of <li> before drag started
    	var contentToBeDragged_next = false; 	// Reference to next sibling of <li> to be dragged
    	var destinationObj = false;	// Reference to <UL> or <LI> where element is dropped.
    	var dragDropIndicator = false;	// Reference to small arrow indicating where items will be dropped
    	var ulPositionArray = new Array();
    	var mouseoverObj = false;	// Reference to highlighted DIV
    	
    	var MSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false;
    	var navigatorVersion = navigator.appVersion.replace(/.*?MSIE (\d\.\d).*/g,'$1')/1;
    
    	
    	var indicateDestinationBox = false;
    	function getTopPos(inputObj)
    	{		
    	  var returnValue = inputObj.offsetTop;
    	  while((inputObj = inputObj.offsetParent) != null){
    	  	if(inputObj.tagName!='HTML')returnValue += inputObj.offsetTop;
    	  }
    	  return returnValue;
    	}
    	
    	function getLeftPos(inputObj)
    	{
    	  var returnValue = inputObj.offsetLeft;
    	  while((inputObj = inputObj.offsetParent) != null){
    	  	if(inputObj.tagName!='HTML')returnValue += inputObj.offsetLeft;
    	  }
    	  return returnValue;
    	}
    		
    	function cancelEvent()
    	{
    		return false;
    	}
    	function initDrag(e)	// Mouse button is pressed down on a LI
    	{
    		if(document.all)e = event;
    		var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
    		var sl = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);
    		
    		dragTimer = 0;
    		dragContentObj.style.left = e.clientX + sl + 'px';
    		dragContentObj.style.top = e.clientY + st + 'px';
    		contentToBeDragged = this;
    		contentToBeDragged_src = this.parentNode;
    		contentToBeDragged_next = false;
    		if(this.nextSibling){
    			contentToBeDragged_next = this.nextSibling;
    			if(!this.tagName && contentToBeDragged_next.nextSibling)contentToBeDragged_next = contentToBeDragged_next.nextSibling;
    		}
    		timerDrag();
    		return false;
    	}
    	
    	function timerDrag()
    	{
    		if(dragTimer>=0 && dragTimer<10){
    			dragTimer++;
    			setTimeout('timerDrag()',10);
    			return;
    		}
    		if(dragTimer==10){
    			
    			if(cloneSourceItems && contentToBeDragged.parentNode.id=='allItems'){
    				newItem = contentToBeDragged.cloneNode(true);
    				newItem.onmousedown = contentToBeDragged.onmousedown;
    				contentToBeDragged = newItem;
    			}
    			dragContentObj.style.display='block';
    			dragContentObj.appendChild(contentToBeDragged);
    		}
    	}
    	
    	function moveDragContent(e)
    	{
    		if(dragTimer<10){
    			if(contentToBeDragged){
    				if(contentToBeDragged_next){
    					contentToBeDragged_src.insertBefore(contentToBeDragged,contentToBeDragged_next);
    				}else{
    					contentToBeDragged_src.appendChild(contentToBeDragged);
    				}	
    			}
    			return;
    		}
    		if(document.all)e = event;
    		var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
    		var sl = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);
    		
    		
    		dragContentObj.style.left = e.clientX + sl + 'px';
    		dragContentObj.style.top = e.clientY + st + 'px';
    		
    		if(mouseoverObj)mouseoverObj.className='';
    		destinationObj = false;
    		dragDropIndicator.style.display='none';
    		if(indicateDestinationBox)indicateDestinationBox.style.display='none';
    		var x = e.clientX + sl;
    		var y = e.clientY + st;
    		var width = dragContentObj.offsetWidth;
    		var height = dragContentObj.offsetHeight;
    		
    		var tmpOffsetX = arrow_offsetX;
    		var tmpOffsetY = arrow_offsetY;
    		if(!document.all){
    			tmpOffsetX = arrow_offsetX_firefox;
    			tmpOffsetY = arrow_offsetY_firefox;
    		}
    
    		for(var no=0;no<ulPositionArray.length;no++){
    			var ul_leftPos = ulPositionArray[no]['left'];	
    			var ul_topPos = ulPositionArray[no]['top'];	
    			var ul_height = ulPositionArray[no]['height'];
    			var ul_width = ulPositionArray[no]['width'];
    			
    			if((x+width) > ul_leftPos && x<(ul_leftPos + ul_width) && (y+height)> ul_topPos && y<(ul_topPos + ul_height)){
    				var noExisting = ulPositionArray[no]['obj'].getElementsByTagName('LI').length;
    				if(indicateDestinationBox && indicateDestinationBox.parentNode==ulPositionArray[no]['obj'])noExisting--;
    				if(noExisting<boxSizeArray[no-1] || no==0){
    					dragDropIndicator.style.left = ul_leftPos + tmpOffsetX + 'px';
    					var subLi = ulPositionArray[no]['obj'].getElementsByTagName('LI');
    					
    					var clonedItemAllreadyAdded = false;
    					if(cloneSourceItems && !cloneAllowDuplicates){
    						for(var liIndex=0;liIndex<subLi.length;liIndex++){
    							if(contentToBeDragged.id == subLi[liIndex].id)clonedItemAllreadyAdded = true;
    						}
    						if(clonedItemAllreadyAdded)continue;
    					}
    					
    					for(var liIndex=0;liIndex<subLi.length;liIndex++){
    						var tmpTop = getTopPos(subLi[liIndex]);
    						if(!indicateDestionationByUseOfArrow){
    							if(y<tmpTop){
    								destinationObj = subLi[liIndex];
    								indicateDestinationBox.style.display='block';
    								subLi[liIndex].parentNode.insertBefore(indicateDestinationBox,subLi[liIndex]);
    								break;
    							}
    						}else{							
    							if(y<tmpTop){
    								destinationObj = subLi[liIndex];
    								dragDropIndicator.style.top = tmpTop + tmpOffsetY - Math.round(dragDropIndicator.clientHeight/2) + 'px';
    								dragDropIndicator.style.display='block';
    								break;
    							}	
    						}					
    					}
    					
    					if(!indicateDestionationByUseOfArrow){
    						if(indicateDestinationBox.style.display=='none'){
    							indicateDestinationBox.style.display='block';
    							ulPositionArray[no]['obj'].appendChild(indicateDestinationBox);
    						}
    						
    					}else{
    						if(subLi.length>0 && dragDropIndicator.style.display=='none'){
    							dragDropIndicator.style.top = getTopPos(subLi[subLi.length-1]) + subLi[subLi.length-1].offsetHeight + tmpOffsetY + 'px';
    							dragDropIndicator.style.display='block';
    						}
    						if(subLi.length==0){
    							dragDropIndicator.style.top = ul_topPos + arrow_offsetY + 'px'
    							dragDropIndicator.style.display='block';
    						}
    					}
    					
    					if(!destinationObj)destinationObj = ulPositionArray[no]['obj'];
    					mouseoverObj = ulPositionArray[no]['obj'].parentNode;
    					mouseoverObj.className='mouseover';
    					return;
    				}
    			}
    		}
    	}
    	
    	/* End dragging 
    	Put <LI> into a destination or back to where it came from.
    	*/	
    	function dragDropEnd(e)
    	{
    		if(dragTimer==-1)return;
    		if(dragTimer<10){
    			dragTimer = -1;
    			return;
    		}
    		dragTimer = -1;
    		if(document.all)e = event;	
    		
    		
    		if(cloneSourceItems && (!destinationObj || (destinationObj && (destinationObj.id=='allItems' || destinationObj.parentNode.id=='allItems')))){
    			contentToBeDragged.parentNode.removeChild(contentToBeDragged);
    		}else{	
    			
    			if(destinationObj){
    				if(destinationObj.tagName=='UL'){
    					destinationObj.appendChild(contentToBeDragged);
    				}else{
    					destinationObj.parentNode.insertBefore(contentToBeDragged,destinationObj);
    				}
    				mouseoverObj.className='';
    				destinationObj = false;
    				dragDropIndicator.style.display='none';
    				if(indicateDestinationBox){
    					indicateDestinationBox.style.display='none';
    					document.body.appendChild(indicateDestinationBox);
    				}
    				contentToBeDragged = false;
    				return;
    			}		
    			if(contentToBeDragged_next){
    				contentToBeDragged_src.insertBefore(contentToBeDragged,contentToBeDragged_next);
    			}else{
    				contentToBeDragged_src.appendChild(contentToBeDragged);
    			}
    		}
    		contentToBeDragged = false;
    		dragDropIndicator.style.display='none';
    		if(indicateDestinationBox){
    			indicateDestinationBox.style.display='none';
    			document.body.appendChild(indicateDestinationBox);
    			
    		}
    		mouseoverObj = false;
    		
    	}
    	
    	/* 
    	Preparing data to be saved 
    	*/
    	function saveDragDropNodes()
    	{
    		var saveString = "";
    		var uls = dragDropTopContainer.getElementsByTagName('UL');
    		for(var no=0;no<uls.length;no++){	// LOoping through all <ul>
    			var lis = uls[no].getElementsByTagName('LI');
    			for(var no2=0;no2<lis.length;no2++){
    				if(saveString.length>0)saveString = saveString + ";";
    				saveString = saveString + uls[no].id + ' ' + '|' + ' ' + ' ' + lis[no2].id;
    			}	
    		}		
    		
    		document.getElementById('saveContent').innerHTML = '<h2>Placement of pictures in the rows:</h2> ' + saveString.replace(/;/g,';<br>');
    		
    	}
    	
    	function initDragDropScript()
    	{
    		dragContentObj = document.getElementById('dragContent');
    		dragDropIndicator = document.getElementById('dragDropIndicator');
    		dragDropTopContainer = document.getElementById('dragDropContainer');
    		document.documentElement.onselectstart = cancelEvent;;
    		var listItems = dragDropTopContainer.getElementsByTagName('LI');	// Get array containing all <LI>
    		var itemHeight = false;
    		for(var no=0;no<listItems.length;no++){
    			listItems[no].onmousedown = initDrag;
    			listItems[no].onselectstart = cancelEvent;
    			if(!itemHeight)itemHeight = listItems[no].offsetHeight;
    			if(MSIE && navigatorVersion/1<6){
    				listItems[no].style.cursor='hand';
    			}			
    		}
    		
    		var mainContainer = document.getElementById('mainContainer');
    		var uls = mainContainer.getElementsByTagName('UL');
    		itemHeight = itemHeight + verticalSpaceBetweenListItems;
    		for(var no=0;no<uls.length;no++){
    			uls[no].style.height = itemHeight * boxSizeArray[no]  + 'px';
    		}
    		
    		var leftContainer = document.getElementById('listOfItems');
    		var itemBox = leftContainer.getElementsByTagName('UL')[0];
    		
    		document.documentElement.onmousemove = moveDragContent;	// Mouse move event - moving draggable div
    		document.documentElement.onmouseup = dragDropEnd;	// Mouse move event - moving draggable div
    		
    		var ulArray = dragDropTopContainer.getElementsByTagName('UL');
    		for(var no=0;no<ulArray.length;no++){
    			ulPositionArray[no] = new Array();
    			ulPositionArray[no]['left'] = getLeftPos(ulArray[no]);	
    			ulPositionArray[no]['top'] = getTopPos(ulArray[no]);	
    			ulPositionArray[no]['width'] = ulArray[no].offsetWidth;
    			ulPositionArray[no]['height'] = ulArray[no].clientHeight;
    			ulPositionArray[no]['obj'] = ulArray[no];
    		}
    		
    		if(!indicateDestionationByUseOfArrow){
    			indicateDestinationBox = document.createElement('LI');
    			indicateDestinationBox.id = 'indicateDestination';
    			indicateDestinationBox.style.display='none';
    			document.body.appendChild(indicateDestinationBox);
                
    			
    		}
    	}
    	
    	window.onload = initDragDropScript;
    	</script>
    </head>
    <body>
    
    <div id="dragDropContainer">
    	
    		
    
    	<div id="listOfItems">
    		<div>
    		<p>Page Pictures</p>		
    		   <ul id="Page_pictures_row1" style="float:left; clear:left;">
    			<li id="pic1"><img src="gfx/drag_column_picture/pic1.jpg">1</li>
    			<li id="pic2"><img src="gfx/drag_column_picture/pic2.jpg">2</li>
    			<li id="pic3"><img src="gfx/drag_column_picture/Pic3.jpg">3</li>
    			<li id="pic4"><img src="gfx/drag_column_picture/Pic4.jpg">4</li>
    			<li id="pic5"><img src="gfx/drag_column_picture/Pic5.jpg">5</li>
    			</ul>
                
                
                
            <ul id="Page_pictures_row2" >
                <li id="pic6"><img src="gfx/drag_column_picture/Pic6.jpg">6</li>
    			<li id="pic7"><img src="gfx/drag_column_picture/Pic7.jpg">7</li>
                <li id="pic8"><img src="gfx/drag_column_picture/Pic8.jpg">8</li>
                <li id="pic9"><img src="gfx/drag_column_picture/Pic9.jpg">9</li>
                <li id="pic10"><img src="gfx/drag_column_picture/Pic10.jpg">10</li>
                </ul>
    		</div>
    	</div>	
    	<div id="mainContainer">
    		<!-- ONE <UL> for each "room" -->
    		
    		<div style="float:left; clear:left;">		
    			<p>New Uploads</p>
    			<ul id="New_Uploads_not_stored1" style="float:left; clear:left;">
                <li id="pic11"><img src="gfx/drag_column_picture/Pic11.jpg"></li>
                <li id="pic12"><img src="gfx/drag_column_picture/pic12.jpg"></li>
                <li id="pic13"><img src="gfx/drag_column_picture/pic13.jpg"></li>
               
                </ul>
                <ul id="New_Uploads_not_stored2">
                <li id="pic11"><img src="gfx/drag_column_picture/Pic11.jpg"></li>
                <li id="pic12"><img src="gfx/drag_column_picture/pic12.jpg"></li>
                <li id="pic13"><img src="gfx/drag_column_picture/pic13.jpg"></li>
               
                </ul>
    		</div>
            
            <div style="float:right;">	
    			<p>Delete Column</p>
    			<ul id="New_Uploads_not_stored" style="float:left; clear:left;">
                <li id="pic11"><img src="gfx/drag_column_picture/Pic11.jpg"></li>
                <li id="pic12"><img src="gfx/drag_column_picture/pic12.jpg"></li>
                <li id="pic13"><img src="gfx/drag_column_picture/pic13.jpg"></li>
               
                </ul>
                <ul id="New_Uploads_not_stored2">
                <li id="pic11"><img src="gfx/drag_column_picture/Pic11.jpg"></li>
                <li id="pic12"><img src="gfx/drag_column_picture/pic12.jpg"></li>
                <li id="pic13"><img src="gfx/drag_column_picture/pic13.jpg"></li>
               
                </ul>
    		</div>
    		
    	</div>
    </div>
    <div id="footer">
    	<form action="aPage.html" method="post"><input type="button" onclick="saveDragDropNodes()" value="Save"></form>
    </div>
    <ul id="dragContent"></ul>
    <div id="saveContent"></div>
    
    
    <body>
    </html>
    I think thats all of it, i appreciate anyone taking a look at this...

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hmm, maybe you need to check again.
    Did you look at the solution in my first post? Did you try it at all?


    This is the validation results of the code you just posted:
    Validation Output: 38 Errors
    Line 461, Column 96: end tag for element "H2" which is not open.
    …lacement of pictures in the rows:</h2> ' + saveString.replace(/;/g,';<br>');✉
    The Validator found an end tag for the above element, but that element is not currently open. This is often caused by a leftover end tag from an element that was removed during editing, or by an implicitly closed element (if you have an error related to an element being used where it is not allowed, this is almost certainly the case). In the latter case this error will disappear as soon as you fix the original problem.

    If this error occurred in a script section of your document, you should probably read this FAQ entry.

    /...snip..../

    Line 558, Column 20: ID "PIC11" already defined.
    <li id="pic11"><img src="gfx/drag_column_picture/Pic11.jpg"></li>✉
    An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).

    Line 552, Column 20: ID "PIC11" first defined here.
    <li id="pic11"><img src="gfx/drag_column_picture/Pic11.jpg"></li> Line 558, Column 71: required attribute "ALT" not specified.
    …"><img src="gfx/drag_column_picture/Pic11.jpg"></li>✉
    The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

    Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.

    Line 559, Column 20: ID "PIC12" already defined.
    <li id="pic12"><img src="gfx/drag_column_picture/pic12.jpg"></li>✉
    An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).

    Line 553, Column 20: ID "PIC12" first defined here.
    <li id="pic12"><img src="gfx/drag_column_picture/pic12.jpg"></li> Line 559, Column 71: required attribute "ALT" not specified.
    …"><img src="gfx/drag_column_picture/pic12.jpg"></li>✉
    The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

    Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.

    Line 560, Column 20: ID "PIC13" already defined.
    <li id="pic13"><img src="gfx/drag_column_picture/pic13.jpg"></li>✉
    An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).

    Line 554, Column 20: ID "PIC13" first defined here.
    <li id="pic13"><img src="gfx/drag_column_picture/pic13.jpg"></li> Line 560, Column 71: required attribute "ALT" not specified.
    …"><img src="gfx/drag_column_picture/pic13.jpg"></li>✉
    The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.


    /...snip.../


    Line 573, Column 20: ID "NEW_UPLOADS_NOT_STORED2" already defined.
    <ul id="New_Uploads_not_stored2">✉
    An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).

    Line 557, Column 20: ID "NEW_UPLOADS_NOT_STORED2" first defined here.
    <ul id="New_Uploads_not_stored2"> Line 574, Column 20: ID "PIC11" already defined.
    <li id="pic11"><img src="gfx/drag_column_picture/Pic11.jpg"></li>✉
    An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).
    /... snip .../
    Line 584, Column 104: document type does not allow element "INPUT" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "PRE", "DIV", "ADDRESS" start-tag.
    …ck="saveDragDropNodes()" value="Save"></form>✉
    The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

    One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

    Line 584, Column 111: end tag for "FORM" which is not finished.
    …eDragDropNodes()" value="Save"></form>✉
    Most likely, you nested tags and closed them in the wrong order. For example <p><em>...</p> is not acceptable, as <em> must be closed before <p>. Acceptable nesting is: <p><em>...</em></p>

    Another possibility is that you used an element which requires a child element that you did not include. Hence the parent element is "not finished", not complete. For instance, in HTML the <head> element must contain a <title> child element, lists (ul, ol, dl) require list items (li, or dt, dd), and so on.

    Line 586, Column 25: end tag for "UL" which is not finished.
    <ul id="dragContent"></ul>✉
    Most likely, you nested tags and closed them in the wrong order. For example <p><em>...</p> is not acceptable, as <em> must be closed before <p>. Acceptable nesting is: <p><em>...</em></p>

    Another possibility is that you used an element which requires a child element that you did not include. Hence the parent element is "not finished", not complete. For instance, in HTML the <head> element must contain a <title> child element, lists (ul, ol, dl) require list items (li, or dt, dd), and so on.

    Line 590, Column 5: document type does not allow element "BODY" here.
    <body>✉
    The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

    One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).

    Line 591, Column 6: "BODY" not finished but containing element ended.
    </html>✉
    All 3 of those lists float next to each other in IE6, IE7 and FF. No float drop...
    Last edited by Excavator; 01-09-2008 at 08:57 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    im sorry, are you using the w3c validator in the FF tool bar, or are you using a different one, sorry stupid question. I will check the suggestions that u posted also

    update
    [sorry i just checked the html im stupid, i will fixx all of the errors and keep and update]
    Last edited by jcdevelopment; 01-09-2008 at 08:57 PM. Reason: looked it up

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    http://validator.w3.org/
    Validate often DURING development - Use it like a spellcheker
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    ok, sorry about that, i have corrected all but 3, and those have nothing to do woth the div tags, they are just output info for me. So now im left with the same problem and i cant seem to figure out why in the hell it keeps completley leaving the div. Could it possibly be my JS?

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Can you put up a test site? That would sure help!
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    I would the only problem is that its a secured Intranet, and you have to have a password to view the site!

  • #10
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by jcdevelopment View Post
    I would the only problem is that its a secured Intranet, and you have to have a password to view the site!
    I have put the original code here with some of my thumbs.

    http://www.exitfegs.co.uk/TEST.html

    Frank
    Last edited by effpeetee; 01-11-2008 at 04:14 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • Users who have thanked effpeetee for this post:

    jcdevelopment (01-11-2008)

  • #11
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    thanks effpeetee, i know you have pics but right now im concerened about this stupid folat problem, put this in the HTML now and over write the existing

    Code:
    <div id="dragDropContainer">
    	
    	<div id="listOfItems">
    		<div>
    			<p>Page Pics</p>		
    		<ul id="featured_pics">
    			<li id="pic1">Student A</li>
    			<li id="pic2">Student B</li>
    			<li id="pic3">Student C</li>
    			<li id="pic4">Student D</li>
    			<li id="pic5">Student E</li>
    			<li id="pic6">Student F</li>
    			<li id="pic7">Student G</li>
    			<li id="pic8">Student H</li>
    			<li id="pic9">Student I</li>
    			<li id="pic10">Student J</li>
    			
    		</ul>
    		</div>
    	</div>	
    	<div id="mainContainer">
    		<!-- ONE <UL> for each "room" -->
    		<div>
    			<p>Uploaded Pics</p>
    			<ul id="uploaded_pics" style="float:left; clear:left;">
    				<li id="node11">Student 1</li>
    			</ul>
                <ul id="uploaded_pics2">
    				<li id="node12">Student 2</li>
    			</ul>
    		</div>
    		<div>		
    			<p>Delete</p>
    			<ul id="delete" style="float:left; clear:left;">
                <li id="node13">Student 4</li>
                </ul>
                <ul id="delete2">
                <li id="node14">Student 3</li>
                </ul>
    		</div>
    		
    	</div>
    </div>
    I dont know why the JS is not working but as long as it works for me

  • #12
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    I've altered it and sent it across, but I do not know what to do with the final piece of (Jsript?) code.

    Frank

    Some small errors.
    Code:
    Validation Output:  3 Errors
    
       1. Error Line 461, Column 96: end tag for element "H2" which is not open.
    
          …lacement of pictures in the rows:</h2> ' + saveString.replace(/;/g,';<br>');
    
          ✉
    
          The Validator found an end tag for the above element, but that element is not currently open. This is often caused by a leftover end tag from an element that was removed during editing, or by an implicitly closed element (if you have an error related to an element being used where it is not allowed, this is almost certainly the case). In the latter case this error will disappear as soon as you fix the original problem.
    
          If this error occurred in a script section of your document, you should probably read this FAQ entry.
       2. Error Line 563, Column 5: document type does not allow element "BODY" here.
    
          <body>
    
          ✉
    
          The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).
    
          One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).
       3. Error Line 564, Column 6: "BODY" not finished but containing element ended.
    
          </html>
    CSS Validation:
    URI : http://www.exitfegs.co.uk/TEST.html
    12 body Family names containing whitespace should be quoted. If quoting is omitted, any whitespace characters before and after the name are ignored and any sequence of whitespace characters inside the name is converted to a single space.

    body {
    font-family : "Trebuchet MS", "Lucida Sans Unicode", Arial, sans-serif;
    background-color : #e2ebed;
    }
    Last edited by effpeetee; 01-11-2008 at 04:24 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #13
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    ok, i tell you what, if you can do me a favor, im going to post all of my code, let me just give credit where credit is due, if you like this code please visit here, its one of the best sites. Ok now that i have gooten that out, replace all of the code with this, i really appreciate this.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    	<title>Drag and Drop to the columns</title>
    	<meta name="Author" content="Alf Magne Kalleland (post@dhtmlgoodies.com)">
    <META NAME="Generator" CONTENT="Alf Magne Kalleland (www.dhtmlgoodies.com)">
    <meta name="KeyWords" content="Drag and drop script,DHTML drag and drop,drag,drop">
    <meta name="Description" content="A library of DHTML and Ajax scripts">
    <meta name="country" content="Norway">
    <meta name="organization-Email" content="post@dhtmlgoodies.com">
    <meta name="copyright" content="copyright 2005 - Alf Magne Kalleland">
    <meta name="coverage" content="Worldwide">
    <meta name="revisit_after" content="30days">
    <meta name="title" content="A library DHTML and Ajax scripts - DHTMLgoodies.com">
    <meta name="identifier" content="http://www.dhtmlgoodies.com/">
    <meta name="language" content="English">
    <meta name="robots" content="follow">
    <meta name="googlebot" content="index, follow">
    
    
    	
    	<style type="text/css">
    	body{
    		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;	/* Font to use */
    		background-color:#E2EBED;
    	}
    	#footer{
    		height:30px;
    		vertical-align:middle;
    		text-align:right;
    		clear:both;
    		padding-right:3px;
    		background-color:#317082;
    		margin-top:2px;
    		width:850px;
    	}
    	#footer form{
    		margin:0px;
    		margin-top:2px;
    	}
    	#dhtmlgoodies_dragDropContainer{	/* Main container for this script */
    		width:850px;
    		height:900px;
    		border:1px solid #317082;
    		background-color:#FFF;
    		-moz-user-select:none;
    	}
    	#dhtmlgoodies_dragDropContainer ul{	/* General rules for all <ul> */
    		margin-top:0px;
    		margin-left:0px;
    		margin-bottom:0px;
    		padding:2px;
    	}
    	
    	#dhtmlgoodies_dragDropContainer li,#dragContent li,li#indicateDestination{	/* Movable items, i.e. <LI> */
    		list-style-type:none;
    		width:86px;
    		height:63px;
    		background-color:#EEE;
    		border:1px solid #000;
    		padding:2px;
    		margin-bottom:2px;
    		margin-left:1px;
    		cursor:pointer;
    		font-size:0.9em;
    	}
    	
    	li#indicateDestination{	/* Box indicating where content will be dropped - i.e. the one you use if you don't use arrow */
    		border:1px dotted #600;	
    		background-color:#FFF;
    	}
    
    	
    	/* LEFT COLUMN CSS */
    	div#dhtmlgoodies_listOfItems{	/* Left column "Available students" */
    	
    		float:left;
    		padding-left:10px;
    		padding-right:10px;
    		
    		/* CSS HACK */
    		width: 180px;	/* IE 5.x */
    		width/* */:/**/160px;	/* Other browsers */
    		width: /**/160px;
    				
    	}
    	#dhtmlgoodies_listOfItems ul{	/* Left(Sources) column <ul> */
    		height:850px;	
    
    	}
    		
    	div#dhtmlgoodies_listOfItems div{
    		border:1px solid #999;		
    	}
    	div#dhtmlgoodies_listOfItems div ul{	/* Left column <ul> */
    		margin-left:10px;	/* Space at the left of list - the arrow will be positioned there */
    	}
    	#dhtmlgoodies_listOfItems div p{	/* Heading above left column */
    		margin:0px;	
    		font-weight:bold;
    		padding-left:12px;
    		background-color:#317082;	
    		color:#FFF;
    		margin-bottom:5px;
    	}
    	/* END LEFT COLUMN CSS */
    	
    	#dhtmlgoodies_dragDropContainer .mouseover{	/* Mouse over effect DIV box in right column */
    		background-color:#E2EBED;
    		border:1px solid #317082;
    	}
    	
    	/* Start main container CSS */
    	
    	div#dhtmlgoodies_mainContainer{	/* Right column DIV */
    		width:650px;
    		float:left;	
    	}
    	#dhtmlgoodies_mainContainer div{	/* Parent <div> of small boxes */
    		float:left;
    		height:850px;
    		margin-right:10px;
    		margin-bottom:10px;
    		margin-top:0px;
    		border:1px solid #999;
    
    		/* CSS HACK */
    		width:300px;	/* IE 5.x */
    		width/* */:/**/300px;	/* Other browsers */
    		width: /**/300px;
    				
    	}
    	#dhtmlgoodies_mainContainer div ul{
    		margin-left:10px;
    
    	}
    	
    	#dhtmlgoodies_mainContainer div p{	/* Heading above small boxes */
    		margin:0px;
    		padding:0px;
    		padding-left:12px;
    		font-weight:bold;
    		background-color:#317082;	
    		color:#FFF;	
    		margin-bottom:5px;
    	}
    	
    	#dhtmlgoodies_mainContainer ul{	/* Small box in right column ,i.e <ul> */
    		width:152px;
    		height:80px;	
    		border:0px;	
    		margin-bottom:0px;
    		overflow:hidden;
    		
    	}
    	
    	#dragContent{	/* Drag container */
    		position:absolute;
    		width:150px;
    		height:20px;
    		display:none;
    		margin:0px;
    		padding:0px;
    		z-index:2000;
    	}
    
    	#dragDropIndicator{	/* DIV for the small arrow */
    		position:absolute;
    		width:7px;
    		height:10px;
    		display:none;
    		z-index:1000;
    		margin:0px;
    		padding:0px;
    	}
    	</style>
    	<style type="text/css" media="print">
    	div#dhtmlgoodies_listOfItems{
    		display:none;
    	}
    	body{
    		background-color:#FFF;
    	}
    	img{
    		display:none;
    	}
    	#dhtmlgoodies_dragDropContainer{
    		border:0px;
    		width:100&#37;;
    	}
    	</style>	
    	<script type="text/javascript">
    	/************************************************************************************************************
    	(C) www.dhtmlgoodies.com, November 2005
    	
    	Update log:
    	
    	December 20th, 2005 : Version 1.1: Added support for rectangle indicating where object will be dropped
    	January 11th, 2006: Support for cloning, i.e. "copy & paste" items instead of "cut & paste"
    	January 18th, 2006: Allowing multiple instances to be dragged to same box(applies to "cloning mode")
    	
    	This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.	
    	
    		Terms of use:
    	You are free to use this script as long as the copyright message is kept intact. However, you may not
    	redistribute, sell or repost it without our permission.
    	
    	Thank you!
    	
    	www.dhtmlgoodies.com
    	Alf Magne Kalleland
    	
    	************************************************************************************************************/
    		
    	/* VARIABLES YOU COULD MODIFY */
    	var boxSizeArray = [12,12,12,12,12];	// Array indicating how many items there is rooom for in the right column ULs
    	
    	var arrow_offsetX = -5;	// Offset X - position of small arrow
    	var arrow_offsetY = 0;	// Offset Y - position of small arrow
    	
    	var arrow_offsetX_firefox = -6;	// Firefox - offset X small arrow
    	var arrow_offsetY_firefox = -13; // Firefox - offset Y small arrow
    	
    	var verticalSpaceBetweenListItems = 3;	// Pixels space between one <li> and next	
    											// Same value or higher as margin bottom in CSS for #dhtmlgoodies_dragDropContainer ul li,#dragContent li
    	
    											
    	var indicateDestionationByUseOfArrow = false;	// Display arrow to indicate where object will be dropped(false = use rectangle)
    
    	var cloneSourceItems = false;	// Items picked from main container will be cloned(i.e. "copy" instead of "cut").	
    	var cloneAllowDuplicates = true;	// Allow multiple instances of an item inside a small box(example: drag Student 1 to team A twice
    	
    	/* END VARIABLES YOU COULD MODIFY */
    	
    	var dragDropTopContainer = false;
    	var dragTimer = -1;
    	var dragContentObj = false;
    	var contentToBeDragged = false;	// Reference to dragged <li>
    	var contentToBeDragged_src = false;	// Reference to parent of <li> before drag started
    	var contentToBeDragged_next = false; 	// Reference to next sibling of <li> to be dragged
    	var destinationObj = false;	// Reference to <UL> or <LI> where element is dropped.
    	var dragDropIndicator = false;	// Reference to small arrow indicating where items will be dropped
    	var ulPositionArray = new Array();
    	var mouseoverObj = false;	// Reference to highlighted DIV
    	
    	var MSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false;
    	var navigatorVersion = navigator.appVersion.replace(/.*?MSIE (\d\.\d).*/g,'$1')/1;
    
    	
    	var indicateDestinationBox = false;
    	function getTopPos(inputObj)
    	{		
    	  var returnValue = inputObj.offsetTop;
    	  while((inputObj = inputObj.offsetParent) != null){
    	  	if(inputObj.tagName!='HTML')returnValue += inputObj.offsetTop;
    	  }
    	  return returnValue;
    	}
    	
    	function getLeftPos(inputObj)
    	{
    	  var returnValue = inputObj.offsetLeft;
    	  while((inputObj = inputObj.offsetParent) != null){
    	  	if(inputObj.tagName!='HTML')returnValue += inputObj.offsetLeft;
    	  }
    	  return returnValue;
    	}
    		
    	function cancelEvent()
    	{
    		return false;
    	}
    	function initDrag(e)	// Mouse button is pressed down on a LI
    	{
    		if(document.all)e = event;
    		var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
    		var sl = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);
    		
    		dragTimer = 0;
    		dragContentObj.style.left = e.clientX + sl + 'px';
    		dragContentObj.style.top = e.clientY + st + 'px';
    		contentToBeDragged = this;
    		contentToBeDragged_src = this.parentNode;
    		contentToBeDragged_next = false;
    		if(this.nextSibling){
    			contentToBeDragged_next = this.nextSibling;
    			if(!this.tagName && contentToBeDragged_next.nextSibling)contentToBeDragged_next = contentToBeDragged_next.nextSibling;
    		}
    		timerDrag();
    		return false;
    	}
    	
    	function timerDrag()
    	{
    		if(dragTimer>=0 && dragTimer<10){
    			dragTimer++;
    			setTimeout('timerDrag()',10);
    			return;
    		}
    		if(dragTimer==10){
    			
    			if(cloneSourceItems && contentToBeDragged.parentNode.id=='allItems'){
    				newItem = contentToBeDragged.cloneNode(true);
    				newItem.onmousedown = contentToBeDragged.onmousedown;
    				contentToBeDragged = newItem;
    			}
    			dragContentObj.style.display='block';
    			dragContentObj.appendChild(contentToBeDragged);
    		}
    	}
    	
    	function moveDragContent(e)
    	{
    		if(dragTimer<10){
    			if(contentToBeDragged){
    				if(contentToBeDragged_next){
    					contentToBeDragged_src.insertBefore(contentToBeDragged,contentToBeDragged_next);
    				}else{
    					contentToBeDragged_src.appendChild(contentToBeDragged);
    				}	
    			}
    			return;
    		}
    		if(document.all)e = event;
    		var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
    		var sl = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);
    		
    		
    		dragContentObj.style.left = e.clientX + sl + 'px';
    		dragContentObj.style.top = e.clientY + st + 'px';
    		
    		if(mouseoverObj)mouseoverObj.className='';
    		destinationObj = false;
    		dragDropIndicator.style.display='none';
    		if(indicateDestinationBox)indicateDestinationBox.style.display='none';
    		var x = e.clientX + sl;
    		var y = e.clientY + st;
    		var width = dragContentObj.offsetWidth;
    		var height = dragContentObj.offsetHeight;
    		
    		var tmpOffsetX = arrow_offsetX;
    		var tmpOffsetY = arrow_offsetY;
    		if(!document.all){
    			tmpOffsetX = arrow_offsetX_firefox;
    			tmpOffsetY = arrow_offsetY_firefox;
    		}
    
    		for(var no=0;no<ulPositionArray.length;no++){
    			var ul_leftPos = ulPositionArray[no]['left'];	
    			var ul_topPos = ulPositionArray[no]['top'];	
    			var ul_height = ulPositionArray[no]['height'];
    			var ul_width = ulPositionArray[no]['width'];
    			
    			if((x+width) > ul_leftPos && x<(ul_leftPos + ul_width) && (y+height)> ul_topPos && y<(ul_topPos + ul_height)){
    				var noExisting = ulPositionArray[no]['obj'].getElementsByTagName('LI').length;
    				if(indicateDestinationBox && indicateDestinationBox.parentNode==ulPositionArray[no]['obj'])noExisting--;
    				if(noExisting<boxSizeArray[no-1] || no==0){
    					dragDropIndicator.style.left = ul_leftPos + tmpOffsetX + 'px';
    					var subLi = ulPositionArray[no]['obj'].getElementsByTagName('LI');
    					
    					var clonedItemAllreadyAdded = false;
    					if(cloneSourceItems && !cloneAllowDuplicates){
    						for(var liIndex=0;liIndex<subLi.length;liIndex++){
    							if(contentToBeDragged.id == subLi[liIndex].id)clonedItemAllreadyAdded = true;
    						}
    						if(clonedItemAllreadyAdded)continue;
    					}
    					
    					for(var liIndex=0;liIndex<subLi.length;liIndex++){
    						var tmpTop = getTopPos(subLi[liIndex]);
    						if(!indicateDestionationByUseOfArrow){
    							if(y<tmpTop){
    								destinationObj = subLi[liIndex];
    								indicateDestinationBox.style.display='block';
    								subLi[liIndex].parentNode.insertBefore(indicateDestinationBox,subLi[liIndex]);
    								break;
    							}
    						}else{							
    							if(y<tmpTop){
    								destinationObj = subLi[liIndex];
    								dragDropIndicator.style.top = tmpTop + tmpOffsetY - Math.round(dragDropIndicator.clientHeight/2) + 'px';
    								dragDropIndicator.style.display='block';
    								break;
    							}	
    						}					
    					}
    					
    					if(!indicateDestionationByUseOfArrow){
    						if(indicateDestinationBox.style.display=='none'){
    							indicateDestinationBox.style.display='block';
    							ulPositionArray[no]['obj'].appendChild(indicateDestinationBox);
    						}
    						
    					}else{
    						if(subLi.length>0 && dragDropIndicator.style.display=='none'){
    							dragDropIndicator.style.top = getTopPos(subLi[subLi.length-1]) + subLi[subLi.length-1].offsetHeight + tmpOffsetY + 'px';
    							dragDropIndicator.style.display='block';
    						}
    						if(subLi.length==0){
    							dragDropIndicator.style.top = ul_topPos + arrow_offsetY + 'px'
    							dragDropIndicator.style.display='block';
    						}
    					}
    					
    					if(!destinationObj)destinationObj = ulPositionArray[no]['obj'];
    					mouseoverObj = ulPositionArray[no]['obj'].parentNode;
    					mouseoverObj.className='mouseover';
    					return;
    				}
    			}
    		}
    	}
    	
    	/* End dragging 
    	Put <LI> into a destination or back to where it came from.
    	*/	
    	function dragDropEnd(e)
    	{
    		if(dragTimer==-1)return;
    		if(dragTimer<10){
    			dragTimer = -1;
    			return;
    		}
    		dragTimer = -1;
    		if(document.all)e = event;	
    		
    		
    		if(cloneSourceItems && (!destinationObj || (destinationObj && (destinationObj.id=='allItems' || destinationObj.parentNode.id=='allItems')))){
    			contentToBeDragged.parentNode.removeChild(contentToBeDragged);
    		}else{	
    			
    			if(destinationObj){
    				if(destinationObj.tagName=='UL'){
    					destinationObj.appendChild(contentToBeDragged);
    				}else{
    					destinationObj.parentNode.insertBefore(contentToBeDragged,destinationObj);
    				}
    				mouseoverObj.className='';
    				destinationObj = false;
    				dragDropIndicator.style.display='none';
    				if(indicateDestinationBox){
    					indicateDestinationBox.style.display='none';
    					document.body.appendChild(indicateDestinationBox);
    				}
    				contentToBeDragged = false;
    				return;
    			}		
    			if(contentToBeDragged_next){
    				contentToBeDragged_src.insertBefore(contentToBeDragged,contentToBeDragged_next);
    			}else{
    				contentToBeDragged_src.appendChild(contentToBeDragged);
    			}
    		}
    		contentToBeDragged = false;
    		dragDropIndicator.style.display='none';
    		if(indicateDestinationBox){
    			indicateDestinationBox.style.display='none';
    			document.body.appendChild(indicateDestinationBox);
    			
    		}
    		mouseoverObj = false;
    		
    	}
    	
    	/* 
    	Preparing data to be saved 
    	*/
    	function saveDragDropNodes()
    	{
    		var saveString = "";
    		var uls = dragDropTopContainer.getElementsByTagName('UL');
    		for(var no=0;no<uls.length;no++){	// LOoping through all <ul>
    			var lis = uls[no].getElementsByTagName('LI');
    			for(var no2=0;no2<lis.length;no2++){
    				if(saveString.length>0)saveString = saveString + ";";
    				saveString = saveString + uls[no].id + '|' + lis[no2].id;
    			}	
    		}		
    		
    		document.getElementById('saveContent').innerHTML = '<h1>Ready to save these nodes:</h1> ' + saveString.replace(/;/g,';<br>') + '<p>Format: ID of ul |(pipe) ID of li;(semicolon)</p><p>You can put these values into a hidden form fields, post it to the server and explode the submitted value there</p>';
    		
    	}
    	
    	function initDragDropScript()
    	{
    		dragContentObj = document.getElementById('dragContent');
    		dragDropIndicator = document.getElementById('dragDropIndicator');
    		dragDropTopContainer = document.getElementById('dhtmlgoodies_dragDropContainer');
    		document.documentElement.onselectstart = cancelEvent;;
    		var listItems = dragDropTopContainer.getElementsByTagName('LI');	// Get array containing all <LI>
    		var itemHeight = false;
    		for(var no=0;no<listItems.length;no++){
    i have to continue it, my text was tto long, so just add the next post to the code.

  • #14
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    Code:
    			listItems[no].onmousedown = initDrag;
    			listItems[no].onselectstart = cancelEvent;
    			if(!itemHeight)itemHeight = listItems[no].offsetHeight;
    			if(MSIE && navigatorVersion/1<6){
    				listItems[no].style.cursor='hand';
    			}			
    		}
    		
    		var mainContainer = document.getElementById('dhtmlgoodies_mainContainer');
    		var uls = mainContainer.getElementsByTagName('UL');
    		itemHeight = itemHeight + verticalSpaceBetweenListItems;
    		for(var no=0;no<uls.length;no++){
    			uls[no].style.height = itemHeight * boxSizeArray[no]  + 'px';
    		}
    		
    		var leftContainer = document.getElementById('dhtmlgoodies_listOfItems');
    		var itemBox = leftContainer.getElementsByTagName('UL')[0];
    		
    		document.documentElement.onmousemove = moveDragContent;	// Mouse move event - moving draggable div
    		document.documentElement.onmouseup = dragDropEnd;	// Mouse move event - moving draggable div
    		
    		var ulArray = dragDropTopContainer.getElementsByTagName('UL');
    		for(var no=0;no<ulArray.length;no++){
    			ulPositionArray[no] = new Array();
    			ulPositionArray[no]['left'] = getLeftPos(ulArray[no]);	
    			ulPositionArray[no]['top'] = getTopPos(ulArray[no]);	
    			ulPositionArray[no]['width'] = ulArray[no].offsetWidth;
    			ulPositionArray[no]['height'] = ulArray[no].clientHeight;
    			ulPositionArray[no]['obj'] = ulArray[no];
    		}
    		
    		if(!indicateDestionationByUseOfArrow){
    			indicateDestinationBox = document.createElement('LI');
    			indicateDestinationBox.id = 'indicateDestination';
    			indicateDestinationBox.style.display='none';
    			document.body.appendChild(indicateDestinationBox);
    
    			
    		}
    	}
    	
    	window.onload = initDragDropScript;
    	</script>
    </head>
    <body>
    <p style="width:500px; text-align:center;">Take the uploaded pictures in the middle column and drop them into the existing first column hold your pictures. Then discard any pictures you no longer want into the third column.</p>
    <div id="dhtmlgoodies_dragDropContainer">
    	
    	<div id="dhtmlgoodies_listOfItems">
    		<div>
    			<p>Page Pics</p>		
    		<ul id="featured_pics">
    			<li id="pic1">Student A</li>
    			<li id="pic2">Student B</li>
    			<li id="pic3">Student C</li>
    			<li id="pic4">Student D</li>
    			<li id="pic5">Student E</li>
    			<li id="pic6">Student F</li>
    			<li id="pic7">Student G</li>
    			<li id="pic8">Student H</li>
    			<li id="pic9">Student I</li>
    			<li id="pic10">Student J</li>
    			
    		</ul>
    		</div>
    	</div>	
    	<div id="dhtmlgoodies_mainContainer">
    		<!-- ONE <UL> for each "room" -->
    		<div>
    			<p>Uploaded Pics</p>
    			<ul id="uploaded_pics" style="float:left; clear:left;">
    				<li id="node11">Student 1</li>
                    <li id="node12">Student 2</li>
                    <li id="node13">Student 2</li>
                    <li id="node14">Student 2</li>
                    <li id="node15">Student 2</li>
                    <li id="node16">Student 2</li>
                    <li id="node17">Student 2</li>
    			</ul>
                <ul id="uploaded_pics2">
    				<li id="node18">Student 2</li>
                    <li id="node19">Student 2</li>
                    <li id="node20">Student 2</li>
                    <li id="node21">Student 2</li>
                    <li id="node22">Student 2</li>
                    <li id="node23">Student 2</li>
                    
    			</ul>
    		</div>
    		<div>		
    			<p>Delete</p>
    			<ul id="delete" style="float:left; clear:left;">
                <li id="node24">Student 4</li>
                 <li id="node25">Student 4</li>
                  <li id="node26">Student 4</li>
                   <li id="node27">Student 4</li>
                    <li id="node28">Student 4</li>
                </ul>
                <ul id="delete2">
                <li id="node29">Student 3</li>
                 <li id="node30">Student 4</li>
                  <li id="node31">Student 4</li>
                   <li id="node32">Student 4</li>
                    <li id="node33">Student 4</li>
                </ul>
    		</div>
    		
    	</div>
    </div>
    <div id="footer">
    	<form action="aPage.html" method="post"><input type="button" onclick="saveDragDropNodes()" value="Save"></form>
    </div>
    <ul id="dragContent"></ul>
    <div id="dragDropIndicator"><img src="images/insert.gif"></div>
    <div id="saveContent"></div>
    
    
    <SCRIPT LANGUAGE="JavaScript" SRC="http://kona.kontera.com/javascript/lib/KonaLibInline.js"></SCRIPT>
    </body>
    </html>
    Thanks effpeetee!!

    now if you look at this in IE, the folat is not working and in FF its exactly what i need. Any help would be great guys!!
    Last edited by jcdevelopment; 01-11-2008 at 04:21 PM.

  • #15
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    I've done that and sent it over but I still do not know what to do with this.

    for(var Life=0;no<notEasy.ever;no++){
    notEasy[no].onmousedown = getOverIt;

    I have just left it out for the time being.

    Frank

    http://www.exitfegs.co.uk/TEST.html
    Last edited by effpeetee; 01-11-2008 at 05:34 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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