js 实现鼠标拖曳div

js 实现拖曳的3个事件,点击时鼠标按下（mousedown事件）、移动时（mousemove事件）、松开时（mouseup事件）,既鼠标按下才能移动div,鼠标松开就不能再移动了.

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}html,body{width: 100%;height: 100%;margin: 0;padding: 0;}#wrap{position: absolute;top: 0;left:0;width: 200px;height: 300px;background: #009F95;}#title{width: 100%;height: 30px;background: #00FF00;color: #fff;line-height: 30px;/*不允许选中标签中的文本*/user-select: none;display: flex;justify-content: space-between;vertical-align: middle;}#title .close{width: 14px;height: 14px;display: inline-block;background-image: url(searchclose.png);background-size: 100%;cursor: pointer;vertical-align: middle;margin-top: 8px;}</style></head><body><div id="wrap"><div id="title">详细信息<span class="close"></span></div><div>1234578765432w34<span></span></div></div></body>
</html>
<script src="jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="drag.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">$(function(){/* drag._getElement(id, parentid);*    id: 要拖动的标签中,允许拖动的位置*    parentid:要拖动的标签* */drag._getElement("title","wrap");// 实现拖曳效果$(".close").click(function(){$("#wrap").css("display","none");});})
</script>

drag.js

var drag = {_getElement:function(id,parentid){// 限定拖动区域的idvar limitarea = document.getElementById(id);limitarea.style.cursor = "move";// 要拖动的idvar dragarea = document.getElementById(parentid);var isDrop = false; //移动状态的判断鼠标按下才能移动// 鼠标按下事件limitarea.onmousedown = function(e) {var e = e || window.event; //要用event这个对象来获取鼠标的位置x = e.clientX - dragarea.offsetLeft;y = e.clientY - dragarea.offsetTop;isDrop = true; //设为true表示可以移动}// 为了防止鼠标移动过快时间短无法正确处理,所以事件绑定到document上document.onmousemove = function(e) {//是否为可移动状态                　　　　　　　　　　　 　　　　　　　if(isDrop) {　　　　var e = e || window.event;                    　　var moveX = e.clientX - x; //得到距离左边移动距离                    　　var moveY = e.clientY - y; //得到距离上边移动距离//可移动最大距离var maxX = document.documentElement.clientWidth - dragarea.offsetWidth;var maxY = document.documentElement.clientHeight - dragarea.offsetHeight;//范围限定  当移动的距离最小时取最大  移动的距离最大时取最小if(moveX < 0) {moveX = 0} else if(moveX > maxX) {moveX = maxX;}if(moveY < 0) {moveY = 0;} else if(moveY > maxY) {moveY = maxY;}dragarea.style.left = moveX + "px";　　dragarea.style.top = moveY + "px";　　　　　　　　　　} else {return;　　　　　　　　　　}}document.onmouseup = function() {isDrop = false; //设置为false不可移动}}
}

js 实现鼠标拖曳div相关推荐

js实现鼠标放在div 悬浮显示另一个div内容链接（不占位置）
js实现鼠标放在div 悬浮显示另一个div内容链接 (不占位置) 代码如下不喜勿喷简单记录前端小知识 <div><a id="div1" href=&quo ...
js之鼠标的拖曳效果
js之鼠标的拖曳效果效果如下: 下面是代码: <!DOCTYPE html> <html lang="en"> <head><meta ...
html判断坐标,js判断鼠标位置是否在某个div中的方法
本文实例讲述了js判断鼠标位置是否在某个div中的方法.分享给大家供大家参考,具体如下: div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判 ...
js禁止鼠标滑轮_js实现鼠标滑动到某个div禁止滚动
本文实例为大家分享了js实现鼠标滑动到某个div禁止滚动的具体代码,供大家参考,具体内容如下项目中碰到一个场景就是当鼠标滑倒某个div的时候,滑动鼠标页面不再滚动. 这里主要是当鼠标滑动到该div时 ...
html5 js获取鼠标坐标,js怎么获取鼠标在div中的相对位置
大家在做网页的时候都可能会用到鼠标在div中的相对位置,那么怎么获取鼠标在div中的相对位置呢?下面由学习啦小编教大家怎么获取鼠标在div中的相对位置吧. 如何获取鼠标在div中的相对位置代码如下: ...
鼠标移动div效果：鼠标拖曳效果
通过简单的鼠标事件,获取实时的鼠标坐标,和实时的div坐标,实现鼠标对div的拖曳效果. 注意事项: 1.event监听事件:有同步性,信息的一种及时交互. 2.获取鼠标实时坐标的三种方法:clien ...
java算斜率_[Java教程]js用斜率判断鼠标进入div的四个方向
[Java教程]js用斜率判断鼠标进入div的四个方向 0 2016-11-07 16:00:08 网上大部分判断鼠标移入div移入移出都是使用一下方法: 这个方法确实十分奇特,使用起来十分方便. 后 ...
html鼠标跟随特效代码简短,JS实现的简单鼠标跟随DiV层效果完整实例
本文实例讲述了JS实现的简单鼠标跟随DiV层效果.分享给大家供大家参考,具体如下: 这段代码呈现一串跟随鼠标的Div效果,并有拖影特效,随着鼠标快速的晃动,Div层效果会不断的增加,后面的Div会自动 ...
html怎么鼠标经过添加蒙版遮罩,js实现鼠标移动到图片产生遮罩效果
本文实例为大家分享了js实现鼠标移动到图片产生遮罩效果的具体代码,供大家参考,具体内容如下 mask .pic{ width:300px; height:250px; background:url(i ...

js 实现鼠标拖曳div

js 实现鼠标拖曳div相关推荐

最新文章

热门文章