Question

js拖动层的问题

我想实现的效果是：鼠标拖动层的时候，保持层不变，另有一个半透明的层跟着鼠标动、、
我只知道有个onmousedown事件，还有个onmouseup
那个当鼠标按下、并拖动的事件怎么写？

Answer 1

随手写了一个~你先看下~看不懂再问吧~
基本原理就是在要拖动的层的位置克隆一个同样的，然后移动这个克隆层
以下是HTML标签：
<div id="div1" style="position: absolute; left: 0px; top: 0px; width: 100px; height: 100px; background-color: Black; cursor: move;"></div>
以下是透明样式：
.opacity
{
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
以下是JS代码：
var div1 = document.getElementById("div1"),
maskDiv, //透明mask层，用于跟随鼠标
clientX, //鼠标按下时水平坐标
clientY, //鼠标按下时垂直坐标
divLeft, //原始div左距离
divTop, //原始div上距离
unit = "px"; //距离样式的单位

//在要移动的层上注册鼠标按下事件
div1.onmousedown = function (event) {
//处理event对象浏览器兼容
event = event || window.event;
//设置鼠标按下时水平坐标
clientX = event.clientX;
//设置鼠标按下时垂直坐标
clientY = event.clientY;
//设置原始div左距离
divLeft = parseFloat(div1.style.left);
//设置原始div上距离
divTop = parseFloat(div1.style.top);

//克隆当前要移动的层
maskDiv = div1.cloneNode(false);
//设置克隆层的透明
maskDiv.setAttribute("className", "opacity");
maskDiv.setAttribute("class", "opacity");
//将透明层加入DOM
div1.parentNode.appendChild(maskDiv);
}

//在文档上注册鼠标移动事件
window.document.onmousemove = function (event) {
//处理event对象浏览器兼容
event = event || window.event;
//如果有克隆层
if (maskDiv) {
//使克隆层随鼠标移动
maskDiv.style.left = divLeft + event.clientX - clientX + unit;
maskDiv.style.top = divTop + event.clientY - clientY + unit;
}
}

//在文档上注册鼠标弹起事件
window.document.onmouseup = function () {
//如果有克隆层
if (maskDiv) {
//将要拖动的层移至克隆层的位置
div1.style.left = maskDiv.style.left;
div1.style.top = maskDiv.style.top;
//移除克隆层
div1.parentNode.removeChild(maskDiv);
maskDiv = null;
}
}
希望对您有帮助~
By Billskate

Answer 2

层的position设为absolute。然后根据鼠标偏移位置来改变层的left和top值