https://www.theinkwellus.com/dragDrop.js

1function DragDropListObject(element,func){
2  var x,i,j;
3  this.debug=false;
4  this.isDragging=false;
5  this.listContainer=element;
6//  this.listContainer.dragDropObject=this;
7  if(func) this.onDragEnd=func;
8  else this.onDragEnd=new Function();
9
10  this.dragList=new Array();
11  x= this.listContainer.childNodes;
12  var instance=this;
13  for(i=0; i<x.length; i++){
14    if(x[i].nodeType==1){
15      j=this.dragList.length;
16      this.dragList[j]=new DragObject(x[i]);      
17      this.dragList[j].onDragStart=function(){instance.dragStart(this.container);}      
18      this.dragList[j].onDrag=function(p,o){instance.drag(o);}
19      this.dragList[j].onDragEnd=function(){instance.dragEnd();}      
20    }    
21  }
22}
23
24DragDropListObject.prototype.dragStart=function(item){
25  if(!this.isDragging){
26    this.nowMoving=item;
27    var h=this.nowMoving.offsetHeight;
28    var w=this.nowMoving.offsetWidth;
29    this.moveStyle=new Object();
30    this.moveStyle.position=this.nowMoving.style["position"];
31    this.moveStyle.width=this.nowMoving.style["width"];
32    this.moveStyle.height=this.nowMoving.style["height"];
33
34    this.placeHolder=ce('div');
35    this.placeHolder.className="dd-place-holder";
36    this.listContainer.insertBefore(this.placeHolder,this.nowMoving);
37    this.nowMoving.style["position"]="absolute";
38    this.placeHolder.appendChild(this.nowMoving);
39    DHTML.setElementSize(this.nowMoving,w,h);
40    DHTML.setElementSize(this.placeHolder,w,h);
41    this.isDragging=true;
42  }
43}
44
45
46DragDropListObject.prototype.dragEnd=function(){
47  if(this.nowMoving&&this.placeHolder){
48    this.nowMoving.style["position"]=this.moveStyle.position;
49    this.nowMoving.style["width"]=this.moveStyle.width;
50    this.nowMoving.style["height"]=this.moveStyle.height;    
51    this.nowMoving.style["left"]="";
52    this.nowMoving.style["top"]="";        
53    this.listContainer.insertBefore(this.nowMoving,this.placeHolder);
54    this.listContainer.removeChild(this.placeHolder);
55    this.placeHolder=null;
56    this.nowMoving=null;
57    this.moveStyle=null;
58  }    
59  this.onDragEnd();
60  this.isDragging=false;
61}
62
63DragDropListObject.prototype.drag=function(offset){
64  var pOffset, sib, dif;
65  if(this.placeHolder){
66    pOffset=new Geometry.offsetBox(this.placeHolder);
67    dif=offset.upperLeft.minus(pOffset.upperLeft).y;
68    if(dif<0){
69      sib=this.placeHolder.previousSibling;
70      while(sib&&sib.nodeType!=1) sib=sib.previousSibling;
71      if(sib&&sib.offsetHeight/2+3<-dif) this.listContainer.insertBefore(this.placeHolder,sib); 
72    }else{
73      sib=this.placeHolder.nextSibling;
74      while(sib&&sib.nodeType!=1) sib=sib.nextSibling;
75      if(sib&&sib.offsetHeight/2+3<dif) this.listContainer.insertBefore(sib,this.placeHolder); 
76    }
77  }
78}
79
80function DragDropObject(element,group){
81  var x,i,j;
82  this.debug=false;
83  this.group=group;
84  this.element=element;
85  this.listContainer=element.parent;
86  var instance=this;
87  this.dragObj=new DragObject(this.element);      
88      this.dragObj.onDragStart=function(){instance.dragStart(this.container);}      
89      this.dragObj.onDrag=function(p,o){instance.drag();}
90      this.dragObj.onDragEnd=function(){instance.dragEnd();}      
91
92}
93
94DragDropObject.prototype.dragStart=DragDropListObject.prototype.dragStart;
95DragDropObject.prototype.drag=function(){
96  this.dropTarget=null;
97  for(var i=0; i<DragDropTargetList.length; i++){
98    if(DragDropTargetList[i].group==this.group){
99      if( Geometry.offsetBox(DragDropTargetList[i].element).inside(this.dragObj.dragCoordinate)){
100        this.dropTarget=DragDropTargetList[i];
101        DragDropTargetList[i].highlight(true);
102      }else{
103        DragDropTargetList[i].highlight(false);
104      }
105    }
106  }
107}
108DragDropObject.prototype.dragEnd=function(){
109  if(this.dragTarget){
110    this.dragTarget.highlight(false);
111    this.dragTarget.onDrop(this);
112    this.dragTarget=null;
113  }  
114  if(this.nowMoving&&this.placeHolder){
115    this.nowMoving.style["position"]=this.moveStyle.position;
116    this.nowMoving.style["width"]=this.moveStyle.width;
117    this.nowMoving.style["height"]=this.moveStyle.height;    
118    this.nowMoving.style["left"]="";
119    this.nowMoving.style["top"]="";        
120    this.listContainer.insertBefore(this.nowMoving,this.placeHolder);
121    this.listContainer.removeChild(this.placeHolder);
122    this.placeHolder=null;
123    this.nowMoving=null;
124    this.moveStyle=null;
125  }    
126}
127
128var DragDropTargetList=new Array();
129
130 function DragDropTarget(element,group,func){
131   this.element=element;
132   this.group=group;
133   if(func) this.onDrop=func;
134   else this.onDrop=new Function();
135 }