当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 拖动一个HTML元素

Javascript
Dhtml:浏览大图时鼠标感应控制层滚动条的移动
初试javascript ：贪吃蛇啊
只让输入数字的输入框
只能输入汉字的输入框
在JS中定义数组删除方法
在网页中使用realplayer播放rm文件
用层实现为网页中的图添加水印的效果
所见即所得编辑器 aynHTML 大全：（一）如何部署、嵌入、装载动态内容
JavaScript 收集的两个小代码！
JScript中正则表达函数的说明与应用
网页上内容导出到word里
关于开发在线网页编辑器按回车会输入<p>而不是<br>的解决方法
OOP In JS [JS脚本中的面向对象]
一个很通用的javascript的下拉菜单
将金额小写转化成汉字大写
VML Chart 控件
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
Javascript实例教程(21) OLE Automation(4)
javascript进行客户端数据的校验
JavaScript 小技巧(第三集)

No. « 8 9 10 11 »

技术文章搜索

关键字

Javascript 中的 拖动一个HTML元素

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-12   浏览: 107 ::
收藏到网摘: n/a

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