易网时代-编程资源站

编程资源图片资源库蚂蚁家优选

首页 / 脚本样式 / JavaScript / 拖动一个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>

版权所有©石家庄振强科技有限公司2024 冀ICP备08103738号-5 网站地图