Need help combining multiple scripts. DOM Drag & Drop script + 2 Others. [Archive]

GSimon

09-24-2012, 03:20 AM

1) Script Title: DOM Drag & Drop script

2) Script URL (on DD):
DOM Drag & Drop script (not in use currently): http://www.dynamicdrive.com/dynamicindex11/domdrag/

Additional Scripts:
Genie-like list items animation (In Use, Modified) http://codepen.io/mishunov/pen/hgfou
Drag and Drop JavaScript 1st Example (not in use currently): http://www.webreference.com/programming/javascript/mk/column2/index.html

My Website:
http://classfind.ca/draganddrop.php

3) Describe problem: I would like to add the DOM Drag & Drop script to my website in order to drag a room # over to the box on the right. Currently you can click on a room # and it will move over to the box on the right, I want this same effect but with the drag and drop script added. The third link I posted titled "Drag and Drop JavaScript 1st Example" is what I'm hoping to accomplish.

I would also like to limit the amount of room # links that can be added to the 'Landing zone' box so that it does not overflow.

Also, I would like to add in a cookie to save the user session, as solved before in this thread here: http://www.dynamicdrive.com/forums/showthread.php?70528-DOM-Drag-amp-Drop-script-save-new-positions-for-reloading-page . Along with having a reset feature (button) as well.

Last thing..I'm looking for a way to redo the effect of adding the room # to one side. For example if you could click on the room # once its in the 'Landing zone' it would return to the list on the left.
Thanks, will maybe need to bring this thread over to the General Paid Work Requests forum since its asking for a few things.

Edit: So I think I'm making some progress with the drag and drop feature, using a script similar to the one found from the blog post here: http://blog.tool-man.org/2005/04/15/drag-between-lists/12/ . Am still unsure how to reset the lists or how to click to send them among other things.

vwphillips

05-09-2013, 02:18 PM

if you are looking for a general purpose drag and dock script

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.drag {
position: relative;
width: 100px;
height: 100px;
background-color: black;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;
cursor: default;
display:inline-block;
}
#one{background: red;}
#two{background: blue;}
#four{background: magenta;}
#zone{
border:1px dashed black;
width:450px;
height:200px;

}
/*]]>*/
</style>

</head>

<body>
<img class="drag" src="http://www.vicsjavascripts.org.uk/StdImages/1.gif" alt="img" />
<img class="drag" src="http://www.vicsjavascripts.org.uk/StdImages/2.gif" alt="img" />
<img class="drag" src="http://www.vicsjavascripts.org.uk/StdImages/3.gif" alt="img" />
<br><br>
<div id="zone"></div>

<script type="text/javascript">
/*<![CDATA[*/
// Drag Drop (03-May-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/

function zxcDragDrop(o){
var cls=o.DragClass,id=o.DropZoneID,z=document.getElementById(id),d=o.CookieDays,o=this,els=o.bycls(document,cls),c,a,ary=[],d=typeof(d)=='number'?d:-1,ck=d>0?o.cookie(id).split('#'):[],z0=0,z0a,z1=0;
for (;z0<els.length;z0++){
c=els[z0].cloneNode(true);
c.style.position='absolute';
c.style.zIndex='101';
a=document.createElement('A');
els[z0].parentNode.insertBefore(a,els[z0]);
a=[els[z0],c,a,ary.length];
o.addevt(els[z0],'mousedown','down',a);
for (z0a=0;z0a<ck.length;z0a++){
if (ck[z0a]==ary.length){
ck[z0a]=els[ck[z0a]];
}
}
ary.push(a);
}
o.z=z;
o.id=id;
o.cls=cls;
o.days=d;
o.ary=ary;
o.addevt(document,'mousemove','move');
o.addevt(document,'mouseup','up');
for (;z1<ck.length;z1++){
if (o.z&&typeof(ck[z1])=='object'){
o.z.appendChild(ck[z1]);
}
}
}

zxcDragDrop.prototype={

bycls:function(obj,cls){
var els=obj.getElementsByTagName('*'),ary=[],z0=0;
for (;z0<els.length;z0++){
if ((' '+els[z0].className+' ').match(' '+cls+' ')){
ary.push(els[z0]);
}
}
return ary;
},

down:function(e,a){
var p=this.pos(a[0]);
a[1].style.left=p[0]+'px';
a[1].style.top=p[1]+'px';
document.body.appendChild(a[1]);
a[0].style.visibility='hidden';
this.drag=a
this.p=p;
this.xy=[e.clientX,e.clientY];
return this.rtn(e)
},

move:function(e){
if (this.drag){
var a=this.drag,xy=[e.clientX,e.clientY];
a[1].style.left=this.p[0]+xy[0]-this.xy[0]+'px';
a[1].style.top=this.p[1]+xy[1]-this.xy[1]+'px';
return this.rtn(e)
}
},

rtn:function(e){
if(e.stopPropagation){
e.stopPropagation();
}
if (!window.event){
e.preventDefault();
}
e.cancelBubble=true;
e.cancel=true;
e.returnValue=false;
return false;
},

up:function(e){
var o=this,a=o.drag,z=o.z,ud=false,els,s='',z0=0,z0a;
if (a){
if (z){
var p=o.pos(z),x=parseInt(a[1].style.left),y=parseInt(a[1].style.top);
ud=x>p[0]&&x<p[0]+z.offsetWidth-a[1].offsetWidth&&y>p[1]&&y<p[1]+z.offsetHeight-a[1].offsetHeight
}
!ud?a[2].parentNode.insertBefore(a[0],a[2]):z.appendChild(a[0]);
a[0].style.visibility='visible';
a[1].style.top='-3000px';
els=z?this.bycls(o.z,o.cls):[];
for (;z0<els.length;z0++){
for (z0a=0;z0a<o.ary.length;z0a++){
if (els[z0]==o.ary[z0a][0]){
s+=o.ary[z0a][3]+'#';
}
}
}
document.cookie=o.id+'='+s+';expires='+(new Date(new Date().getTime()+o.days*86400000).toGMTString())+';path=/';
o.drag=false;
}
},

cookie:function(nme){
var re=new RegExp(nme+'=[^;]+','i');
return document.cookie.match(re)?document.cookie.match(re)[0].split("=")[1]:'';
},

pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
},

addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener){
o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
}
else if (o.attachEvent){
o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
}
}

}

new zxcDragDrop({
DragClass:'drag', // the common class name of the 'draggable' elements. (string)
DropZoneID:'zone', // the unique ID name of the drop zone element. (string)
CookieDays:1 // the number of days to restore the drop zone elements. (number)
});

/*]]>*/
</script></body>

</html>