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

Javascript
js支持158、159开头的手机号的验证
javascript学习网址备忘
JScript的条件编译
[原创]站长必须要知道的javascript广告代码
js实现的点击超链显示隐藏层
JCalendar 日历控件 v1.0 beta[兼容IE&Firefox] 有文档和例子
JavaScript 不只是脚本
把JS与CSS写在同一个文件里的书写方法
Javascript & DHTML 实例编程（教程）基础知识
Javascript & DHTML 实例编程（教程）DOM基础和基本API
javascript实现的一个图片转移效果
用js实现键盘方向键翻页功能的代码
js实现DIV的一些简单控制
用CSS+JS实现的进度条效果效果
爱恋千雪-US-AscII加密解密工具（网页加密）下载
用javascript实现始终保持打开同一个子窗口以及关闭父窗口同时自动关闭所有子窗口
非常不错的页面特效 建议大家看下
javascript Zifa FormValid 0.1表单验证 代码打包下载
实现javascript的延期执行或者重复执行的两个函数
推荐一个不错的图片浏览效果

No. « 69 70 71 72 »

技术文章搜索

关键字

Javascript 中的 拖动一个HTML元素

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-12   浏览: 166 ::
收藏到网摘: 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>