JavaScript实现可拖拽的拖动层Div实例

本文实例讲述了JavaScript实现可拖拽的拖动层Div。分享给大家供大家参考。具体如下:

这是一个完美的JS拖拽效果,带拖尾的JavaScript拖动层代码,经过了多次优化修正,复制节点的方法不错,值得JS爱好者学习,同时代码修正了给拖拽元素加ondblclick事件无效的问题,兼容多种浏览器,拷贝代码即可运行使用。

运行效果如下图所示:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

*{ margin:0; padding:0;} .div{ width:100px; height:100px; position:absolute;left:100px; top:100px; background:#ccc;}

</style>

</head>

<body>

<div class="div">

</div>

<script type="text/javascript">

var div = document.getElementsByTagName('div')[0];

var zIndex = 6;

drag(div);

div.ondblclick = function() {

alert("ok");

};

function drag(oDrag) {

var disX = dixY = 0;

oDrag.onmousedown = function(event) {

var event = event || window.event;

disX = event.clientX - this.offsetLeft;

disY = event.clientY - this.offsetTop;

var oTemp = this.cloneNode(true);

document.body.appendChild(oTemp);

document.onmousemove = function(event) {

var event = event || window.event;

var iL = event.clientX - disX;

var iT = event.clientY - disY;

var maxL = document.documentElement.clientWidth - oDrag.offsetWidth;

var maxT = document.documentElement.clientHeight - oDrag.offsetHeight;

iL <= 0 && (iL = 0);

iT <= 0 && (iT = 0);

iL >= maxL && (iL = maxL);

iT >= maxT && (iT = maxT);

oTemp.style.zIndex = zIndex++;

oTemp.style.opacity = "0.5";

oTemp.style.filter = "alpha(opacity=50)";

oTemp.style.left = iL + "px";

oTemp.style.top = iT + "px";

return false;

};

document.onmouseup = function() {

document.onmousemove = null;

document.onmouseup = null;

oDrag.style.opacity = oTemp.style.opacity;

var arr = {

left: oTemp.offsetLeft,

top: oTemp.offsetTop

};

oDrag.style.zIndex = oTemp.style.zIndex;

oAnimate(oDrag, arr, 300,

function() {

document.body.removeChild(oTemp);

});

oDrag.releaseCapture && oDrag.releaseCapture()

};

this.setCapture && this.setCapture();

return false

}

}

function oAnimate(obj, params, time, handler) {

var node = typeof obj == "string" ? $(obj) : obj;

var _style = node.currentStyle ? node.currentStyle: window.getComputedStyle(node, null);

var handleFlag = true;

for (var p in params) { (function() {

var n = p;

if (n == "left" || n == "top") {

var _old = parseInt(_style[n]);

var _new = parseInt(params[n]);

var _length = 0,

_tt = 10;

if (!isNaN(_old)) {

var count = _old;

var length = _old <= _new ? (_new - _old) : (_old - _new);

var speed = length / time * _tt;

var flag = 0;

var anim = setInterval(function() {

node.style[n] = count + "px";

count = _old <= _new ? count + speed: count - speed;

flag += _tt;

if (flag >= time) {

node.style[n] = _new + "px";

clearInterval(anim);

if (handleFlag) {

handler();

handleFlag = false;

}

}

},

_tt);

}

}

})();

}

}

</script>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

以上是 JavaScript实现可拖拽的拖动层Div实例 的全部内容, 来源链接: utcz.com/z/325767.html

回到顶部