Javascript 如何实现对象的拖动？
解决思路
这个效果并不算常见，通常用于游戏或个人站点中。因为拖曳是靠鼠标来操作的，所以对鼠标的位置的捕获是问题的重点，然后才是根据鼠标的位置设置层的位置。
具体步骤：
1.在对象(层)上按下鼠标时，先捕获到需要拖曳的对象，然后获取或设置该对象的相关属性。
obj=event.srcElement
obj.setCapture()
z=obj.style.zIndex
obj.style.zIndex=100
x=event.offsetX
y=event.offsetY
down=true
2.开始拖曳时，捕获鼠标当前位置，并根据该数值设置被拖曳对象的位置。
obj.style.posLeft=document.body.scrollLeft+event.x-x
obj.style.posTop=document.body.scrollTop+event.y-y
3.拖曳完松开鼠标后，重设标志 down ，还原对象的 z-index并释放对它的鼠标捕捉。
down=false
obj.style.zIndex=z
obj.releaseCapture()
4.完整代码。
<script>
var x,y,z,down=false,obj
function init(){
obj=event.srcElement //事件触发对象
obj.setCapture() //设置属于当前对象的鼠标捕捉
z=obj.style.zIndex //获取对象的z轴坐标值
//设置对象的z轴坐标值为100，确保当前层显示在最前面
obj.style.zIndex=100
x=event.offsetX //获取鼠标指针位置相对于触发事件的对象的X坐标
y=event.offsetY //获取鼠标指针位置相对于触发事件的对象的Y坐标
down=true //布尔值，判断鼠标是否已按下，true为按下，false为未按下
}
function moveit(){
//判断鼠标已被按下且onmouseover和onmousedown事件发生在同一对象上
if(down&&event.srcElement==obj){
with(obj.style){
/*设置对象的X坐标值为文档在X轴方向上的滚动距离加上当前鼠标指针相当于文档对象的X坐标值减鼠标按下时指针位置相对于触发事件的对象的X坐标*/
posLeft=document.body.scrollLeft+event.x-x
/*设置对象的Y坐标值为文档在Y轴方向上的滚动距离加上当前鼠标指针相当于文档对象的Y坐标值减鼠标按下时指针位置相对于触发事件的对象的Y坐标*/
posTop=document.body.scrollTop+event.y-y
}
}
}
function stopdrag(){
//onmouseup事件触发时说明鼠标已经松开，所以设置down变量值为false
down=false
obj.style.zIndex=z //还原对象的Z轴坐标值
obj.releaseCapture() //释放当前对象的鼠标捕捉
}
</script>
<div onmousedown=init() onmousemove=moveit() onmouseup=stopdrag() style="position:absolute;left:20;top:190;width:100;height:150;border:1px solid #000000;z-index:1;background:#eeeeee">Layer 1</div>
<div onmousedown=init() onmousemove=moveit() onmouseup=stopdrag() style="position:absolute;left:60;top:10;width:100;height:150;border:1px solid #000000;z-index:2;background:#eeeeee">Layer 2</div>
<div onmousedown=init() onmousemove=moveit() onmouseup=stopdrag() style="position:absolute;left:100;top:90;width:100;height:150;border:1px solid #000000;z-index:3;background:#eeeeee">Layer 3</div>
注意：只有 CSS 的 position 属性值为 absolute 的对象才能进行拖动操作。
提示：如果需要将拖曳组件化，可以参考第二部分HTC一节。
技巧：可以在 init() 函数中加一句 event.cancelBubble=true ，以取消在该对象上的事件冒泡。
试一试：读者可以试着实现移动其他对象，例如移动一个图片或文本框。
特别提示
在拖曳对象前必须确保该对象的为绝对定位的，把上面的完整代码保存就可以看到效果了，在实际就用时务必在对象上加上 onmousedown、onmousemove和onmouseup三个事件并触发相应函数。代码运行效果如图 3.8 所示。
图 3.8 可拖动的层
特别说明
本例需要掌握的技巧比较多，捕捉鼠标，获取鼠标位置(相当于对象)，释放鼠标捕捉，文档的滚动距离还有with 语句。
1. setCapture() 设置属于当前文档的对象的鼠标捕捉。
2. event.offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
3. event.offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。
4. releaseCapture() 释放当前文档中对象的鼠标捕捉。
5. scrollLeft 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。
6. scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。
7. with 为一个或多个语句设定默认对象。
以下这个方法做出来的比较好看，并增加了层的几个功能
3个不同高度的三维可拖动图层的例子
=====================================================================
<html>
<head>
<title>_xWin</title>
<style type='text/css'>
<!--
a:visited{text-decoration:none;color:slategray;}
a:hover{text-decoration:underline;color:slategray;}
a:link{text-decoration:none;color:slategray;}
-->
</style>
<script language=JScript>
<!--
//可以打包为js文件;
var x0=0,y0=0,x1=0,y1=0;
var offx=6,offy=6;
var moveable=false;
var hover='orange',normal='slategray';//color;
var index=10000;//z-index;
//开始拖动;
function startDrag(obj)
{
//锁定标题栏;
obj.setCapture();
//定义对象;
var win = obj.parentNode;
var sha = win.nextSibling;
//记录鼠标和层位置;
x0 = event.clientX;
y0 = event.clientY;
x1 = parseInt(win.style.left);
y1 = parseInt(win.style.top);
//记录颜色;
normal = obj.style.backgroundColor;
//改变风格;
obj.style.backgroundColor = hover;
win.style.borderColor = hover;
obj.nextSibling.style.color = hover;
sha.style.left = x1 + offx;
sha.style.top = y1 + offy;
moveable = true;
}
//拖动;
function drag(obj)
{
var win = obj.parentNode;
var sha = win.nextSibling;
if(moveable)
{
win.style.left = x1 + event.clientX - x0;
win.style.top = y1 + event.clientY - y0;
sha.style.left = parseInt(win.style.left) + offx;
sha.style.top = parseInt(win.style.top) + offy;
}
}
//停止拖动;
function stopDrag(obj)
{
var win = obj.parentNode;
var sha = win.nextSibling;
win.style.borderColor = normal;
obj.style.backgroundColor = normal;
obj.nextSibling.style.color = normal;
sha.style.left = obj.parentNode.style.left;
sha.style.top = obj.parentNode.style.top;
//放开标题栏;
obj.releaseCapture();
moveable = false;
}
//获得焦点;
function getFocus(obj)
{
index = index + 2;
var idx = index;
obj.style.zIndex=idx;
obj.nextSibling.style.zIndex=idx-1;
}
function min(obj)
{
var win = obj.parentNode.parentNode;
var sha = win.nextSibling;
var tit = obj.parentNode;
var msg = tit.nextSibling;
var flg = msg.style.display=="none";
if(flg)
{
win.style.height = parseInt(msg.style.height) + parseInt(tit.style.height) + 2*2;
sha.style.height = win.style.height;
msg.style.display = "block";
obj.innerHTML = "0";
}
else
{
win.style.height = parseInt(tit.style.height) + 2*2;
sha.style.height = win.style.height;
obj.innerHTML = "2";
msg.style.display = "none";
}
}
function cls(obj)
{
var win = obj.parentNode.parentNode;
var sha = win.nextSibling;
win.style.visibility = "hidden";
sha.style.visibility = "hidden";
}
//创建一个对象;
function xWin(id,w,h,l,t,tit,msg)
{
index = index+2;
this.id = id;
this.width = w;
this.height = h;
this.left = l;
this.top = t;
this.zIndex = index;
this.title = tit;
this.message = msg;
this.obj = null;
this.bulid = bulid;
this.bulid();
}
//初始化;
function bulid()
{
var str = ""
+ "<div id=xMsg" + this.id + " "
+ "style='"
+ "z-index:" + this.zIndex + ";"
+ "width:" + this.width + ";"
+ "height:" + this.height + ";"
+ "left:" + this.left + ";"
+ "top:" + this.top + ";"
+ "background-color:" + normal + ";"
+ "color:" + normal + ";"
+ "font-size:10px;"
+ "font-family:Verdana;"
+ "position:absolute;"
+ "cursor:default;"
+ "border:2px solid " + normal + ";"
+ "' "
+ "onmousedown='getFocus(this)'>"
+ "<div "
+ "style='"
+ "background-color:" + normal + ";"
+ "width:" + (this.width-2*2) + ";"
+ "height:20;"
+ "color:white;"
+ "' "
+ "onmousedown='startDrag(this)' "
+ "onmouseup='stopDrag(this)' "
+ "onmousemove='drag(this)' "
+ ">"
+ "<span style='width:" + (this.width-2*12-4) + ";padding-left:3px;'>" + this.title + "</span>"
+ "<span style='width:12;border-width:0px;color:white;font-family:webdings;' onclick='min(this)'>0</span>"
+ "<span style='width:12;border-width:0px;color:white;font-family:webdings;' onclick='cls(this)'>r</span>"
+ "</div>"
+ "<div style='"
+ "width:100%;"
+ "height:" + (this.height-20-4) + ";"
+ "background-color:white;"
+ "line-height:14px;"
+ "word-break:break-all;"
+ "padding:3px;"
+ "'>" + this.message + "</div>"
+ "</div>"
+ "<div style='"
+ "width:" + this.width + ";"
+ "height:" + this.height + ";"
+ "top:" + this.top + ";"
+ "left:" + this.left + ";"
+ "z-index:" + (this.zIndex-1) + ";"
+ "position:absolute;"
+ "background-color:black;"
+ "filter:alpha(opacity=40);"
+ "'>?</div>";
//alert(str);
document.body.insertAdjacentHTML("beforeEnd",str);
}
//-->
</script>
<script language='JScript'>
<!--
function initialize()
{
var a = new xWin("1",160,200,200,200,"Message","xWin <br> A Cool Pop Div Window<br>Version:1.0<br>2002-8-13");
var b = new xWin("2",240,200,100,100,"Wildwind's Msgbox","Welcome to visited my personal website:<br><a href=http://www14.brinkster.com/wildcity target=_blank>http://wildcity.126.com</a><br>and u can also sign my guestbook at:<br><a href=http://www14.brinkster.com/wildcity/gbook target=_blank>http://wildcity.126.com/gbook</a><br><br>thx!!! =)...");
var c = new xWin("3",200,160,250,50,"Copyright","Copyright by <a href='mailto:wildwind_zz@21cn.com'>Wildwind</a>!");
}
window.onload = initialize;
//-->
</script>
</head>
<body onselectstart='return false' oncontextmenu='return false'>
</body>
</html>
分享到：
相关推荐
"鼠标拖动层"是一种这样的技术，它允许用户通过鼠标操作来移动页面上的某个元素，比如一个图像、一个区块或者一个窗口。这种功能常见于游戏、个人网站或者任何需要用户手动调整元素位置的场景。下面将详细探讨如何...
本资源"jquery鼠标拖动层DIV源代码精简整理版"提供了一个轻量级的解决方案，用于实现HTML元素（特别是DIV）的拖动功能。下面我们将深入探讨这一主题。 首先，`div`是HTML中的一个块级元素，常用来组织页面布局。...
javascript实现用鼠标拖动页面的效果，而不是传统意义上的拖动一个层的效果
js模拟浏览器 Ctrl+F 查找 + div层鼠标拖动 改变位置 两个功能demo js模拟浏览器 Ctrl+F 查找 + div层鼠标拖动 改变位置 两个功能demo js模拟浏览器 Ctrl+F 查找 + div层鼠标拖动 改变位置 两个功能demo js模拟...
JavaScript可拖动层技术是网页开发中的一个重要组成部分，它允许用户通过鼠标操作在网页上移动元素，提升用户体验，尤其在创建交互式用户界面时显得尤为关键。这种技术基于JavaScript，一种广泛使用的客户端脚本语言...
"各种js层特效，拖动层"这个主题主要涵盖了JavaScript在处理页面元素，特别是层（Layer）的效果以及拖放功能的应用。这里我们将深入探讨这些知识点。 **层特效（Layer Effects）** 层在网页设计中扮演着关键角色，...
总结来说，实现“jquery 体育馆场馆鼠标拖动事件”主要涉及理解并利用jQuery中的鼠标事件、拖动行为模拟以及可能的移动层操作。通过结合`mousedown`、`mousemove`和`mouseup`事件，可以创建出流畅的拖动效果，同时...
"js弹出层特效点击按钮弹出窗口支持鼠标拖动"这个主题，关注的是如何创建一个具有动态效果的弹出层，它不仅可以在用户点击按钮时出现，还允许用户通过鼠标拖动来调整弹出层的位置。 首先，我们需要理解HTML结构。在...
可保存位置并自动吸附的JavaScript拖动层.rar可保存位置并自动吸附的JavaScript拖动层.rar可保存位置并自动吸附的JavaScript拖动层.rar可保存位置并自动吸附的JavaScript拖动层.rar可保存位置并自动吸附的JavaScript...
jquery图片鼠标拖动效果代码是一款jquery div页面图片浮动层鼠标拖动效果代码。
jQuery鼠标拖动上下层排序代码基于jquery-1.11.0.min.js制作，鼠标拖动DIV层排序。
值得注意的是，描述中提到js不是完全由开发者编写，可能意味着部分拖动层的实现依赖于第三方库或已有的JavaScript代码片段。这可能是为了简化开发过程，利用现有的成熟解决方案，提高效率。 在压缩包中的"drag"文件...
在JavaScript编程领域，"弹出层特效点击按钮弹出窗口支持鼠标拖动"是一个常见的交互设计，用于增强用户体验。这个功能通常应用于各种网页应用中，比如提示信息、表单填写、图片预览等场景。本文件提供的就是一个实现...
在JavaScript编程中，实现“鼠标拖动图片”功能是一项常见的交互设计，它可以增强用户体验，让用户更直观地操作和浏览图片。这项技术的核心是利用事件监听和处理，包括鼠标按下、移动和释放等事件，以及对图片位置和...
JavaScript做的可以的拖动的层DIV，鼠标按下拖动 JavaScript做的可以的拖动的层DIV，鼠标按下拖动 JavaScript做的可以的拖动的层DIV，鼠标按下拖动
在本文中，我们将深入探讨如何使用jQuery实现一个简单的鼠标拖动div层进行排序的功能。这个功能允许用户通过鼠标操作，自由地改变div容器内li元素的排列顺序，从而提供更直观和互动的用户体验。 首先，我们需要理解...
通过JavaScript，这些元素可以与layer.js插件交互，实现弹出层的显示和关闭，以及图片的拖动功能。 在实际应用中，layer.js的使用并不复杂。开发者需要了解基本的HTML、CSS和JavaScript知识，然后按照插件提供的...
在JavaScript中，实现拖动层类的关键在于监听鼠标事件，包括`mousedown`（鼠标按下）、`mousemove`（鼠标移动）和`mouseup`（鼠标释放）。下面我们将深入探讨这些关键步骤： 1. **初始化设置**： 在创建拖动层类时...
JavaScrpt 拖动层鼠标松开后自动排序
总之，实现"可自由拖动的层js效果"涉及JavaScript编程、事件处理、CSS样式以及可能的第三方库（如jQuery）。通过分析提供的文件，我们可以学习到不同的实现方法和设计思路，这对于提升前端开发技能非常有帮助。