拖动一个HTML元素 - 站长资源库


答案：<script content="text/javascript"> 
var iMouseDown = false; 
var dragObject = null; 
Number.prototype.NaN0=function(){return isNaN(this)?0:this;} 

// Demo 0 variables 
var DragDrops = []; 
var curTarget = null; 
var lastTarget = null; 

function makeDraggable(item){ 
  if(!item) return; 
  item.onmousedown = function(ev){ 
    dragObject = this; 
    mouseOffset = getMouseOffset(this, ev); 
    return false; 
  } 
} 

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 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 mouseDown(ev){ 
  ev = ev || window.event; 
  var target = ev.target || ev.srcElement; 

  if(target.onmousedown || target.getAttribute('DragObj')){ 
    return false; 
  } 
} 

function mouseUp(ev){ 

  //dragObject = null; 

  if(dragObject){ 
    ev = ev || window.event; 
    var mousePos = mouseCoords(ev); 

    var dT = dragObject.getAttribute('droptarget'); 
    if(dT){ 
      var targObj = document.getElementById(dT); 
      var objPos = getPosition(targObj); 
      if((mousePos.x > objPos.x) && (mousePos.y > objPos.y)  
&& (mousePos.x<(objPos.x+parseInt(targObj.offsetWidth))) 
 && (mousePos.y<(objPos.y+parseInt(targObj.offsetHeight)))){ 
        var nSrc = targObj.getAttribute('newSrc'); 
        if(nSrc){ 
          dragObject.src = nSrc; 
          setTimeout(function(){ 
            if(!dragObject || !dragObject.parentNode) return; 
            dragObject.parentNode.removeChild(dragObject); 
            dragObject = null; 
          }, parseInt(targObj.getAttribute('timeout'))); 
        } else { 
          dragObject.parentNode.removeChild(dragObject); 
        } 
      } 
    } 
  } 
  dragObject = null; 

  iMouseDown = false; 
} 

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); 

  if(dragObject){ 
    dragObject.style.position = 'absolute'; 
    dragObject.style.top = mousePos.y - mouseOffset.y; 
    dragObject.style.left = mousePos.x - mouseOffset.x; 
  } 

  // track the current mouse state so we can compare against it next time 
  lMouseState = iMouseDown; 

  // this prevents items on the page from being highlighted while dragging 
  if(curTarget || dragObject) return false; 
} 

function addDropTarget(item, target){ 
  item.setAttribute('droptarget', target); 
} 

document.onmousemove = mouseMove; 
document.onmousedown = mouseDown; 
document.onmouseup = mouseUp; 

window.onload = function (){ 
  makeDraggable(document.getElementById('DragImage9')); 
  makeDraggable(document.getElementById('DragImage10')); 
  makeDraggable(document.getElementById('DragImage11')); 
  makeDraggable(document.getElementById('DragImage12')); 

  addDropTarget(document.getElementById('DragImage9'), 'TrashImage1'); 
  addDropTarget(document.getElementById('DragImage10'), 'TrashImage1'); 
  addDropTarget(document.getElementById('DragImage11'), 'TrashImage1'); 
  addDropTarget(document.getElementById('DragImage12'), 'TrashImage1'); 
} 
</script> 
</head> 
<body> 

<fieldset id="Demo6" style="height: 70px"><h3>Demo - Drag any of the images</h3> 
<img id="TrashImage1" src="http://www.cnlei.org/codes/javascript/js-drag-drop/images/drag_drop_trash.gif" /> 
<img id="DragImage9" src="http://www.cnlei.org/codes/javascript/js-drag-drop/images/drag_drop_spade.gif" /> 
<img id="DragImage10" src="http://www.cnlei.org/codes/javascript/js-drag-drop/images/drag_drop_heart.gif" /> 
<img id="DragImage11" src="http://www.cnlei.org/codes/javascript/js-drag-drop/images/drag_drop_diamond.gif" /> 
<img id="DragImage12" src="http://www.cnlei.org/codes/javascript/js-drag-drop/images/drag_drop_club.gif" /> 
</fieldset>
上一个：用JavaScript限制textarea输入长度 (For: IE、Firefox ...)[
下一个：Javascript实例教程(19) 使用HoTMetal(5)
更多图片编程知识: