拖动Html元素集合 Drag and Drop any item

答案：<style content="text/css"> 
li { 
  MARGIN-BOTTOM: 10px 
} 
ul { 
  MARGIN-TOP: 5px 
} 
.DragContainer { 
  BORDER-RIGHT: #669999 2px solid; PADDING-RIGHT: 5px; BORDER-TOP: #669999 2px solid; PADDING-LEFT: 5px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 3px; BORDER-LEFT: #669999 2px solid; WIDTH: 100px; PADDING-TOP: 5px; BORDER-BOTTOM: #669999 2px solid 
} 
.OverDragContainer { 
  BORDER-RIGHT: #669999 2px solid; PADDING-RIGHT: 5px; BORDER-TOP: #669999 2px solid; PADDING-LEFT: 5px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 3px; BORDER-LEFT: #669999 2px solid; WIDTH: 100px; PADDING-TOP: 5px; BORDER-BOTTOM: #669999 2px solid 
} 
.OverDragContainer { 
  BACKGROUND-COLOR: #eee 
} 
.DragBox { 
  BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee 
} 
.OverDragBox { 
  BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee 
} 
.DragDragBox { 
  BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee 
} 
.miniDragBox { 
  BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee 
} 
.OverDragBox { 
  BACKGROUND-COLOR: #ffff99 
} 
.DragDragBox { 
  BACKGROUND-COLOR: #ffff99 
} 
.DragDragBox { 
  FILTER: alpha(opacity=50); BACKGROUND-COLOR: #ff99cc 
} 
LEGEND { 
  FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #666699; FONT-FAMILY: verdana, tahoma, arial 
} 
FIELDSET { 
  PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px 
} 
.History { 
  FONT-SIZE: 10px; OVERFLOW: auto; WIDTH: 100%; FONT-FAMILY: verdana, tahoma, arial; HEIGHT: 82px 
} 
#DragContainer8 { 
  BORDER-RIGHT: #669999 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #669999 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 0px; BORDER-LEFT: #669999 1px solid; WIDTH: 110px; PADDING-TOP: 5px; BORDER-BOTTOM: #669999 1px solid; HEIGHT: 110px 
} 
.miniDragBox { 
  FLOAT: left; MARGIN: 0px 5px 5px 0px; WIDTH: 20px; HEIGHT: 20px 
} 
pre{border:1 solid #CCC;background-color:#F8F8F0;padding:10px;} 
</style> 
<script content="text/javascript"> 

// iMouseDown represents the current mouse button state: up or down 
/* 
lMouseState represents the previous mouse button state so that we can 
check for button clicks and button releases: 

if(iMouseDown && !lMouseState) // button just clicked! 
if(!iMouseDown && lMouseState) // button just released! 
*/ 
var mouseOffset = null; 
var iMouseDown = false; 
var lMouseState = false; 
var dragObject = null; 

// Demo 0 variables 
var DragDrops = []; 
var curTarget = null; 
var lastTarget = null; 
var dragHelper = null; 
var tempDiv = null; 
var rootParent = null; 
var rootSibling = null; 

Number.prototype.NaN0=function(){return isNaN(this)?0:this;} 

function CreateDragContainer(){ 
  /* 
  Create a new "Container Instance" so that items from one "Set" can not 
  be dragged into items from another "Set" 
  */ 
  var cDrag = DragDrops.length; 
  DragDrops[cDrag] = []; 

  /* 
  Each item passed to this function should be a "container". Store each 
  of these items in our current container 
  */ 
  for(var i=0; i<arguments.length; i++){ 
    var cObj = arguments[i]; 
    DragDrops[cDrag].push(cObj); 
    cObj.setAttribute('DropObj', cDrag); 

    /* 
    Every top level item in these containers should be draggable. Do this 
    by setting the DragObj attribute on each item and then later checking 
    this attribute in the mouseMove function 
    */ 
    for(var j=0; j<cObj.childNodes.length; j++){ 

      // Firefox puts in lots of #text nodes...skip these 
      if(cObj.childNodes[j].nodeName=='#text') continue; 

      cObj.childNodes[j].setAttribute('DragObj', cDrag); 
    } 
  } 
} 

function mouseCoords(ev){ 
  if(ev.pageX || ev.pageY){ 
    return {x:ev.pageX, y:ev.pageY}; 
  } 
  return { 
    x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, 
    y:ev.clientY + document.body.scrollTop - document.body.clientTop 
  }; 
} 

function getMouseOffset(target, ev){ 
  ev = ev || window.event; 

  var docPos = getPosition(target); 
  var mousePos = mouseCoords(ev); 
  return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y}; 
} 

function getPosition(e){ 
  var left = 0; 
  var top = 0; 
  while (e.offsetParent){ 
    left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0); 
    top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0); 
    e = e.offsetParent; 
  } 

  left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0); 
  top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0); 

  return {x:left, y:top}; 

} 

function mouseMove(ev){ 
  ev = ev || window.event; 

  /* 
  We are setting target to whatever item the mouse is currently on 

  Firefox uses event.target here, MSIE uses event.srcElement 
  */ 
  var target = ev.target || ev.srcElement; 
  var mousePos = mouseCoords(ev); 

  // mouseOut event - fires if the item the mouse is on has changed 
  if(lastTarget && (target!==lastTarget)){ 
    // reset the classname for the target element 
    var origClass = lastTarget.getAttribute('origClass'); 
    if(origClass) lastTarget.className = origClass; 
  } 

  /* 
  dragObj is the grouping our item is in (set from the createDragContainer function). 
  if the item is not in a grouping we ignore it since it can't be dragged with this 
  script. 
  */ 
  var dragObj = target.getAttribute('DragObj'); 

   // if the mouse was moved over an element that is draggable 
  if(dragObj!=null){ 

    // mouseOver event - Change the item's class if necessary 
    if(target!=lastTarget){ 
      var oClass = target.getAttribute('overClass'); 
      if(oClass){ 
        target.setAttribute('origClass', target.className); 
        target.className = oClass; 
      } 
    } 

    // if the user is just starting to drag the element 
    if(iMouseDown && !lMouseState){ 
      // mouseDown target 
      curTarget = target; 

      // Record the mouse x and y offset for the element 
      rootParent = curTarget.parentNode; 
      rootSibling = curTarget.nextSibling; 

      mouseOffset = getMouseOffset(target, ev); 

      // We remove anything that is in our dragHelper DIV so we can put a new item in it. 
      for(var i=0; i<dragHelper.childNodes.length; i++) dragHelper.removeChild(dragHelper.childNodes[i]); 

      // Make a copy of the current item and put it i

上一个：在IE下：float属性会影响offsetTop的取值
下一个：获取table中的rowIndex和cellIndex