编程 Javascript

拖动一个HTML元素

Posted in Javascript onDecember 22, 2006

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

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>

拖动一个HTML元素

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

用js查找法实现当前栏目的高亮显示的代码

Nov 24 Javascript

基于jquery的设置页面文本框只能输入数字的实现代码

Apr 19 Javascript

yepnope.js 异步加载资源文件

Sep 08 Javascript

jQuery 在光标定位的地方插入文字的插件

May 10 Javascript

在JavaScript中操作时间之getMonth()方法的使用

Jun 10 Javascript

新手简单了解vue

May 29 Javascript

Vue引入Stylus知识点总结

Jan 16 Javascript

webpack的 rquire.context用法实现工程自动化的方法

Feb 07 Javascript

详解三种方式在React中解决绑定this的作用域问题并传参

Aug 18 Javascript

JavaScript中的执行环境和作用域链

Sep 04 Javascript

Javascript生成器（Generator）的介绍与使用

Jan 31 Javascript

JS 4个超级实用的小技巧提升开发效率

Oct 05 Javascript

JavaScript中Array 对象相关的几个方法

Dec 22 #Javascript

JavaScript事件列表解说

Dec 22 #Javascript

改进：论坛UBB代码自动插入方式

Dec 22 #Javascript

用javascript获取地址栏参数

Dec 22 #Javascript

在IE下：float属性会影响offsetTop的取值

Dec 22 #Javascript

Javascript实现的分页函数

Dec 22 #Javascript

一些常用的Javascript函数

Dec 22 #Javascript