如何用js来实现div的复制和拖进拖出(类似google的拖动)

Question

这个问题的思路很清晰,条理也很明确,就是处理起来有点复杂,根结点就在于拖动的过程中如何复制或者新建一个div,拖离后字体颜色就变灰了,也不能再次拖动了,除非把原来拖离开的div拖回来,否则就不能继续拖动了.困饶我好久了都没能解决,发发贴,看那位高手指点下迷津,不胜感激!

Answer 1

可不可以这样，左边的div只是在被拖动的时候改变颜色，右边的追加或者删除。其间，做一个隐藏标签，来记载左边的div是否已经被拖动。如果已经被拖动了，再次拖动视为无效。从右侧拖回后，在把标签从新设置成可拖动

Answer 2

做个标签倒是不难,实际上在拖动之后,拖动的那个div已经被删除了,完全被移动到拖动之后的位置去了,因为拖动之后没有div了,所以颜色也变不了了,现在的问题是必须要有原来div的复制或者新建才能让他变色和禁用的,我就是不知道怎么处理他了

Answer 3

Drag.dragObj.parentNode.insertBefore(Drag.dragObj,mouseOverObj);

Answer 4

我把drag.js文件也放上来好了
var Drag=new function(){    
    this.source=new Array();
    this.target=new Array();
    
    this.topDistance=0;
    this.leftDistance=0;
    
    this.currentObj=null;
    
    this.currentContainer=null;
    
    this.isDragging=false;
    
    this.addSource=function(){
        for (var i = 0; i < arguments.length; i++){
            var _element = arguments[i];
            if (typeof(_element)=="string") {
                _element=document.getElementById(_element);
            }            
            Drag.source.push(new Drag.sourceObj(_element));            
        }
    }
    
    this.hasSource=function(_element){
        for (var i=0; i<Drag.source.length; i++){
         if (Drag.source[i].element==_element){
             return true;
         }
        }
        return false;
    }
    
    this.addTarget=function(_element){
        for (var i = 0; i < arguments.length; i++){
            var _element = arguments[i];
            if (typeof(_element)=="string"){
                _element=document.getElementById(_element);
            }
            Drag.target.push(new Drag.targetObj(_element));            
        }
    }
    
    this.removeSource=function(_element){
        for (var i=0; i<Drag.source.length; i++){
         if (Drag.source[i].element==_element){
             Drag.source.splice (i,1); 
         }
        }        
    }
    
    this.hasTarget=function(_element){
         for (var i=0; i<Drag.target.length; i++){
         if (Drag.target[i].element==_element){
             return true;
         }
        }
        return false;
    }
    
    this.start=function(event){
        if (!Event.isLeftClick(event)) return;
        Drag.currentObj=Event.element(event);
        if (Drag.hasSource(Drag.currentObj)){
            //var currObj = Drag.currentObj.cloneNode(true);
            
            //Drag.removeSource(Drag.currentObj);
            
            //Drag.addSource(currObj);
            
            //Drag.currentObj = currObj; 
                        
            Drag.currentObj.style.cursor="move";
            var p=Position.getPosition(Drag.currentObj);
            var x=Event.pointerX(event);
            var y=Event.pointerY(event);
            Position.direction.setInitValue(x,y);            
            Drag.topDistance=y-p.top;
            Drag.leftDistance=x-p.left;
            
            DashedDiv.div.style.width=p.width;
            DashedDiv.div.style.height=p.height;
            DashedDiv.div.style.display="";
            
            Drag.currentObj.parentNode.insertBefore(DashedDiv.div,Drag.currentObj);
            
            Drag.currentObj.style.top=p.top+5;
            Drag.currentObj.style.left=p.left+5;
            Drag.currentObj.style.position="absolute";
            
            document.body.appendChild(Drag.currentObj);
            
            Drag.isDragging=true;
            
            Event.observe(document,"mousemove",Drag.drag);
            Event.observe(document,"mouseup",Drag.end);
        } else {
            Drag.currentObj=null;
        }
    }
    

Answer 5

this.drag=function(event) {
        if (!Event.isLeftClick(event) || !Drag.isDragging || Drag.currentObj==null) return;
        
        var x=Event.pointerX(event);
        var y=Event.pointerY(event);
        Position.direction.setDirection(x,y);        
        
        Drag.currentObj.style.top=y-Drag.topDistance;
        Drag.currentObj.style.left=x-Drag.leftDistance;
        if (Drag.currentContainer==null){
            for (var i=0;i<Drag.target.length;i++){
                if (Position.inside(Drag.currentObj,Drag.target[i].element)){
                    Drag.currentContainer=Drag.target[i].element;
                    Drag.setDashedDivPosition();
                    break;                    
                }
            }
        }else{
            if (Position.outside(Drag.currentObj,Drag.currentContainer)){
                Drag.currentContainer=null;
            }
            else{
                Drag.setDashedDivPosition();
            }
        }
    }
    
    this.end=function(event) {
        if (!Event.isLeftClick(event)) return;
        if (Drag.currentObj!=null) {       
            DashedDiv.div.parentNode.insertBefore(Drag.currentObj,DashedDiv.div);
            DashedDiv.div.style.display="none";
            
            Drag.currentObj.style.position="relative";
            Drag.currentObj.style.cursor="default";
            
            Drag.currentObj.style.top=0;
            Drag.currentObj.style.left=0;
            
            Drag.currentObj=null;
            Drag.currentContainer=null;
            Drag.topDistance=0;
            Drag.leftDistance=0;
            this.isDragging=false;
            
            Position.direction.setInitValue(0,0);
        }
    }
    
    this.setDashedDivPosition=function(){        
        if (Position.direction.down){
            if (DashedDiv.div.parentNode!=Drag.currentContainer){
                Drag.currentContainer.insertBefore(DashedDiv.div,Drag.currentContainer.firstChild)
                return;
            }
            var cp=Position.getPosition(Drag.currentObj);
            var nextNode=Drag.handler.getNextNode(DashedDiv.div);
            var p=Position.getPosition(nextNode);
            var node=null;
            while (nextNode!=null && cp.minY>p.minY+2){
                node=nextNode;
                nextNode=Drag.handler.getNextNode(nextNode);
                p=Position.getPosition(nextNode);
            }
            if (node!=null){
                if (node.nextSibling){
                    node.parentNode.insertBefore(DashedDiv.div,node.nextSibling);
                }
                else{
                    node.parentNode.appendChild(DashedDiv.div);
                }
            }
        }
        else if (Position.direction.up){
            if (DashedDiv.div.parentNode!=Drag.currentContainer){
                Drag.currentContainer.appendChild(DashedDiv.div);
                return;
            }
            var cp=Position.getPosition(Drag.currentObj);
            var previousNode=Drag.handler.getPreviousNode(DashedDiv.div);
            var p=Position.getPosition(previousNode);
            var node=null;
            while (previousNode!=null && cp.minY<p.minY-2){
                node=previousNode;
                previousNode=Drag.handler.getPreviousNode(previousNode);
                p=Position.getPosition(previousNode);
            }
            if (node!=null){
                node.parentNode.insertBefore(DashedDiv.div,node);
            }
        }
    }
}Drag.sourceObj=function(_element){
    this.element=_element;
    Event.observe(this.element,"mousedown",Drag.start);    
}Drag.targetObj=function(_element){
    this.element=_element;    
}var DashedDiv=new function(){
    this.div=null;
    this.init=function(){
        if (this.div==null){
            this.div=document.createElement("div");
            this.div.id="dashed";
            this.div.style.cssText="border:1px dashed red;position:relative;cursor:move;filter:alpha(opacity=60);-moz-opacity:0.6;display:none";
            document.body.appendChild(this.div);
        }
    }
    this.init();
}Drag.handler=new function()
{
    this.swap=function(_node1,_node2){
        _node1.swapNode(_node2);
    }
    
    this.getNextNode=function(_node){
var sibling = _node.nextSibling;
while (sibling != null){
if (sibling.nodeName==_node.nodeName) return sibling;
sibling = sibling.nextSibling;
}
return null;
}

this.getPreviousNode=function(_node) {
var sibling = _node.previousSibling;
while (sibling != null){
if (sibling.nodeName==_node.nodeName) return sibling;
sibling = sibling.previousSibling;
}
return null;
}
}

Answer 6

我在start方面里加了个removeSource和addSource方法,这样就能实现复制了,但是却不能定位了,而且只能拖动一次,不能重复拖动,注释的就是添加的代码

Answer 7

以下，部分代码来自：
拖动：JKDrag ( 移动模块在页面中的位置)
http://jkisjk.spaces.live.com/blog/cns!758CACE25E89DD3B!358.entry
代码仅通过ie5.5+测试，仅作示意
----------<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>
<style>
.dragTable
{
background-color:white;
position:relative;
}.dragTableHeader
{
cursor:move;
background-color:#cccccc;
}
.dragTableHeaderDisabled
{
background-color:red;
}</style>
<script language="javascript">
var beginMoving=false;
var sourceObj=null;
var dragTableHeader=null;
var tipDiv=null;function MouseDownToMove(obj){
 if((event.button&1)==0) return;
 sourceObj=obj.offsetParent;
 sourceObj.style.zIndex=10;
 sourceObj.mouseDownY=event.clientY;
 sourceObj.mouseDownX=event.clientX;
 beginMoving=true;
 dragTableHeader=obj;
 dragTableHeader.setCapture();
}
function MouseMoveToMove(obj){
 if(!beginMoving) return;
 sourceObj.style.top = (event.clientY-sourceObj.mouseDownY);
 sourceObj.style.left = (event.clientX-sourceObj.mouseDownX);
 setTipDivPosition();
}
function MouseUpToMove(obj){
 if(!beginMoving) return;
 dragTableHeader.releaseCapture();
 sourceObj.style.top=0;
 sourceObj.style.left=0;
 sourceObj.style.zIndex=0;
 beginMoving=false;
 window.setTimeout("swapFun()",20);
}
function MouseOverFun(obj){
 if (tipDiv==null) {
  tipDiv=document.createElement("<div style='position:absolute;z-index:10;line-height:2px;height:2px;color:red;'>");
  tipDiv.innerText="------";
 }
 obj.insertAdjacentElement("beforeBegin",tipDiv);
 if(obj==sourceObj) return;
}
function swapFun(){
 if(sourceObj!=null) {
  if(!sourceObj.hasBeenMoved) {
  sourceObj.hasBeenMoved=1;
  var disabledObj=sourceObj.cloneNode(true);
  disabledObj.rows[0].cells[0].onmousedown=null;
  disabledObj.rows[0].cells[0].className="dragTableHeaderDisabled";
  disabledObj.all.tableName.disabled=true;
  sourceObj.insertAdjacentElement("afterEnd",disabledObj);
  }
  tipDiv.insertAdjacentElement("afterEnd",sourceObj);
  if(true) {
var tableNameObjs=document.getElementsByName("tableName");
var originalIndex=-3;
var currentIndex=-3;;
for(var i=0;i<tableNameObjs.length;i++)
{
if(tableNameObjs[i].parentElement.offsetParent==sourceObj){
currentIndex=i;
continue;
}
if(tableNameObjs[i].value==sourceObj.all.tableName.value){
originalIndex=i;
}
}
if(Math.abs(originalIndex-currentIndex)==1){
tableNameObjs[originalIndex].parentElement.offsetParent.removeNode(true);
sourceObj.hasBeenMoved=0;
}
  } 
 }
 sourceObj=null;
}
function setTipDivPosition(){
 var allTables=document.getElementsByTagName("table");
 for(var i=0;i<allTables.length;i++) {
  if(allTables[i]==sourceObj) continue;
  if(allTables[i].className=="dragTable" && isMouseInBox(allTables[i])){
   allTables[i].insertAdjacentElement("beforeBegin",tipDiv);
   return;
  }
 }
 sourceObj.insertAdjacentElement("beforeBegin",tipDiv);
}
function isMouseInBox(obj){ 
 var point1=new Array(event.clientX+document.body.scrollLeft,event.clientY+document.body.scrollTop); 
 var point2=getObjPosition(obj); 
 return( (point1[0]>=point2[0]) && point1[1]>=point2[1] && point1[0]-point2[0]<=obj.offsetWidth && point1[1]-point2[1]<=obj.offsetHeight )
} 
function getObjPosition(obj){ 
 var point=new Array(0,0); 
 while(obj!=document.body){
  point[0]+=obj.offsetLeft;
  point[1]+=obj.offsetTop;
  obj=obj.offsetParent;
 }
 return point;
}</script>
<script defer>
document.onmousemove=MouseMoveToMove;
document.onmouseup=MouseUpToMove; 
</script>
</head><body><table border="1" width="100%" height="58">
  <tr>
    <td width="50%" valign="top" >
    <input type=hidden name="tableName" value="空间-------1">
      <table border="1" width="100%" class="dragTable" onmouseover="MouseOverFun(this);">
        <tr >
          <td class=dragTableHeader onmousedown='MouseDownToMove(this)' ><input type=hidden name="tableName" value="表格1">表格1</td>
          <td >其它内容</td>
        </tr>
      </table>
      <table border="1" width="100%" class="dragTable" onmouseover="MouseOverFun(this);">
        <tr >
          <td class=dragTableHeader onmousedown='MouseDownToMove(this)' ><input type=hidden name="tableName" value="表格2">表格2</td>
          <td >其它内容</td>
        </tr>
      </table>
      <table width="100%" onmouseover="MouseOverFun(this);" class="dragTable" ><tr><td >&nbsp;</td></tr></table>
    </td>
    <td width="50%" valign="top" >
    <input type=hidden name="tableName" value="空间-------2">
      <table border="1" width="100%" class="dragTable" onmouseover="MouseOverFun(this);">
        <tr >
          <td class=dragTableHeader onmousedown='MouseDownToMove(this)' ><input type=hidden name="tableName" value="表格3">表格3</td>
          <td >其它内容</td>
        </tr>
      </table>
      <table border="1" width="100%" class="dragTable" onmouseover="MouseOverFun(this);">
        <tr >
          <td class=dragTableHeader onmousedown='MouseDownToMove(this)' ><input type=hidden name="tableName" value="表格4">表格4</td>
          <td >其它内容</td>
        </tr>
      </table>
      <table width="100%" onmouseover="MouseOverFun(this);" class="dragTable" ><tr><td >&nbsp;</td></tr></table>
    </td>
  </tr>
</table>
<table border="1" width="100%" height="58">
  <tr>
    <td width="50%" valign="top" >
    <input type=hidden name="tableName" value="空间-------3">
      <table border="1" width="100%" class="dragTable" onmouseover="MouseOverFun(this);">
        <tr >
          <td class=dragTableHeader onmousedown='MouseDownToMove(this)' ><input type=hidden name="tableName" value="表格5">表格5</td>
          <td >其它内容</td>
        </tr>
      </table>
      <table border="1" width="100%" class="dragTable" onmouseover="MouseOverFun(this);">
        <tr >
          <td class=dragTableHeader onmousedown='MouseDownToMove(this)' ><input type=hidden name="tableName" value="表格6">表格6</td>
          <td >其它内容</td>
        </tr>
      </table>
      <table width="100%" onmouseover="MouseOverFun(this);" class="dragTable" ><tr><td >&nbsp;</td></tr></table>
    </td>
    <td width="50%" valign="top" >
    <input type=hidden name="tableName" value="空间-------4">
      <table border="1" width="100%" class="dragTable" onmouseover="MouseOverFun(this);">
        <tr >
          <td class=dragTableHeader onmousedown='MouseDownToMove(this)' ><input type=hidden name="tableName" value="表格7">表格7</td>
          <td >其它内容</td>
        </tr>
      </table>
      <table border="1" width="100%" class="dragTable" onmouseover="MouseOverFun(this);">
        <tr >
          <td class=dragTableHeader onmousedown='MouseDownToMove(this)' ><input type=hidden name="tableName" value="表格8">表格8</td>
          <td >其它内容</td>
        </tr>
      </table>
      <table width="100%" onmouseover="MouseOverFun(this);" class="dragTable" ><tr><td >&nbsp;</td></tr></table>
    </td>
  </tr>
</table><input type=button value="保存示例" onclick="saveFun()">
</body>
</html>
<script>
function saveFun()
{
var tableNameObjs=document.getElementsByName("tableName");
var tempStr="";
for(var i=0;i<tableNameObjs.length;i++)
{
if(!tableNameObjs[i].disabled)tempStr += "\n"+tableNameObjs[i].value;
}
alert(tempStr);}
</script>

Answer 8

JK_10000,我在你的live空间留言了,看到请回复我,比较急,谢谢了!

Answer 9

sorry，帮不上忙，
如果你想支持ff，那就别看JK的代码
因为JK的代码不能给帮助，反而会误导你。