您的位置：首页 > Web前端 > JavaScript

js 拖拽实现

2016-07-12 13:05 633 查看

代码参考

<!DOCTYPE html>
<html lang="en">
<title>拖拽</title>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#dog {
width: 150px;
height: 150px;
background: red;
position: fixed;
}
</style>

</head>

<body>
<div id="dog"></div>
</body>

</html>
<script>
utils = {
dragMov:function(dom){
dom.style.cursor = 'move';
dom.onmousedown = function (ev) {
var oEvent = ev || event;
var gapX = oEvent.clientX - dom.offsetLeft;
var gapY = oEvent.clientY - dom.offsetTop;
document.onmousemove = function (ev) {
var oEvent = ev || event;
//限制在可视区域内运动
var l = oEvent.clientX - gapX;
var t = oEvent.clientY - gapY;
var r = document.documentElement.clientWidth - dom.offsetWidth;
var b = document.documentElement.clientHeight - dom.offsetHeight;
if (l < 0) {
dom.style.left = 0 + "px";
} else if (l > r) {
dom.style.left = r + "px";
} else {
dom.style.left = l + "px";
}
if (t < 0) {
dom.style.top = 0 + "px";
} else if (t > b) {
dom.style.top = b + "px";
} else {
dom.style.top = t + "px";
}
}
}
dom.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
}
}
}
utils.dragMov(document.getElementById('dog'));
</script>

另外一个（转）

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css" >
html,body
{
height:100%;
width:100%;
padding:0;
margin:0;
}

.dialog
{
width:250px;
height:250px;
position:absolute;
background-color:#ccc;
-webkit-box-shadow:1px 1px 3px #292929;
-moz-box-shadow:1px 1px 3px #292929;
box-shadow:1px 1px 3px #292929;
margin:10px;
}

.dialog-title
{
color:#fff;
background-color:#404040;
font-size:12pt;
font-weight:bold;
padding:4px 6px;
cursor:move;
}

.dialog-content
{
padding:4px;
}
</style>
</head>
<body>
<div id="dlgTest" class="dialog">
<div class="dialog-title">Dialog</div>
<div class="dialog-content">
This is a draggable test.
</div>
</div>
<script type="text/javascript">
var Dragging=function(dom){ //参数为验证点击区域是否为可移动区域，如果是返回欲移动元素，负责返回null
var draggingObj=null; //dragging Dialog
var diffX=0;
var diffY=0;

function mouseHandler(e){
switch(e.type){
case 'mousedown':
draggingObj=dom;//验证是否为可点击移动区域
if(draggingObj!=null){
diffX=e.clientX-draggingObj.offsetLeft;
diffY=e.clientY-draggingObj.offsetTop;
}
break;

case 'mousemove':
if(draggingObj){
draggingObj.style.left=(e.clientX-diffX)+'px';
draggingObj.style.top=(e.clientY-diffY)+'px';
}
break;

case 'mouseup':
draggingObj =null;
diffX=0;
diffY=0;
break;
}
};
return {
enable:function(){
document.addEventListener('mousedown',mouseHandler);
document.addEventListener('mousemove',mouseHandler);
document.addEventListener('mouseup',mouseHandler);
},
disable:function(){
document.removeEventListener('mousedown',mouseHandler);
document.removeEventListener('mousemove',mouseHandler);
document.removeEventListener('mouseup',mouseHandler);
}
}
}
Dragging(document.querySelector('#dlgTest')).enable();
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航