拖动一个HTML元素

站长资源 2024/11/18 佚名

52 1538 52

富贵资源网 Design By www.hznty.com

<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="/UploadFiles/2021-04-02/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="/UploadFiles/2021-04-02/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="/UploadFiles/2021-04-02/drag_drop_club.gif"></fieldset>

拖动一个HTML元素

富贵资源网 Design By www.hznty.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

富贵资源网 Design By www.hznty.com

评论“拖动一个HTML元素”

暂无评论...