js实现可拖拽的div

实现一个div可以被拖拽，代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>zzw_drap</title><style>* {margin: 0;padding: 0;}#box {position: absolute;top: 100px;left: 200px;width: 500px;}#bar {padding-left:50px; height: 50px;line-height: 50px;color: white;background-color: #aaa;cursor: move;}#content {padding:30px 0 0 50px ;height: 300px;background-color: #eee;}</style>
</head>
<body><div id="box"><div id="bar">可拖拽头部</div><div id="content">这里是内容</div></div><script>/** zzw.drag 2017-3* js实现div可拖拽* @params bar 可以点击拖动的元素* @params box 拖动的整体元素 必须是position: absolute;* 思想：鼠标的clienX/clientY相对值设置为父元素的left/top的相对值*/var dragBox = function (drag, wrap) {function getCss(ele, prop) {return parseInt(window.getComputedStyle(ele)[prop]);}var initX,initY,dragable = false,wrapLeft = getCss(wrap, "left"),wrapRight = getCss(wrap, "top");drag.addEventListener("mousedown", function (e) {dragable = true;initX = e.clientX;initY = e.clientY;}, false);  document.addEventListener("mousemove", function (e) {if (dragable === true ) {var nowX = e.clientX,nowY = e.clientY,disX = nowX - initX,disY = nowY - initY;wrap.style.left = wrapLeft + disX + "px";wrap.style.top = wrapRight + disY + "px";}});drag.addEventListener("mouseup", function (e) {dragable = false;wrapLeft = getCss(wrap, "left");wrapRight = getCss(wrap, "top");}, false); };dragBox(document.querySelector("#bar"), document.querySelector("#box"));</script>
</body>
</html>

其中我们可以直接使用封装好的函数，它接受两个参数，第一个是可以点击拖拽的元素，第二个是父元素。注意：父元素的postion设置为 absolute才可以使用。

2017年8月31日更新：

这里的mousemove的监听对象修改为了document，否则，如果我们拖拽速度太快，会出现bug，即可能鼠标脱离了wrap，然后这时就会出现问题，而如果修改为了document，问题几乎得到了解决。

js实现可拖拽的div相关推荐

html鼠标拖动变换大小案例,js实现鼠标拖拽缩放div实例代码_哒哒_前端开发者
封装为了jq插件,如下 drag. ;(function ($) { $.fn.dragDiv = function (options) { var def = { maxW:600,// 可伸缩的最 ...
【墙裂推荐】【原生基础版】js原生实现拖拽效果，注意不要忘了div的cursor用grab和grabbing 还是古法炮制、传统工艺的原生代码兼容性最好，推荐
以下方式的劣势就是在放弃拖拽那一刻会触发click事件,通常如果被拖拽元素还有其他点击事件,会重复触发,往往并非业务需求.优势就是-额-貌似这段代码没什么屌优势! <div class='dra ...
JQuery Dialog(JS模态窗口,可拖拽的DIV)
JQuery Dialog(JS模态窗口,可拖拽的DIV) 吴剑 2012-08-08 原创文章,转载必需注明出处:http://www.cnblogs.com/wu-jian/ 效果图调用示意图 ...
js 鼠标拖拽改变div宽度高度
js 鼠标拖拽改变div宽度高度, <!DOCTYPE html> <html><head><meta charset="UTF-8" / ...
【加强版】js原生实现拖拽效果，这次没有用document的mousedown、mousemove、mouseup事件我们来点实际的（但是有个弊端：拖拽过程中鼠标会变成一个禁用符号，不太友好）
<div class='dragged'></div> //初始化需要拖拽的列initDrags() {var arr = document.querySelectorAll( ...
html点击控制盒子左右移动,JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例...
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例发布时间:2020-10-04 12:47:25 来源:脚本之家阅读:121 作者:s_psycho 本文实例讲述了JS实现鼠标拖拽盒子移动及右键 ...
mousedown、mousemove、mouseup实现一个可拖拽的div
可拖拽的div 前言:前端开发当中不单单是简单的页面布局,很多的事件也应用在其中,比如一个窗口实现在整个页面的拖动的需求. 明确步骤 (1)对div设置position:absolute:属性并设置t ...
html 复选框拖拽多选,js实现鼠标拖拽多选功能
最近做了一个用js实现鼠标拖拽多选的功能,于是整理了一下思路,写了一个小demo: 遮罩出现: 被遮罩盖住的,即为选中的块(背景色为粉色) 下面是具体代码,注释已在文中,与大家交流. 鼠标拖拽多选功能 ...
鼠标拖拽调整div大小
鼠标拖拽调整div大小实现思路根据鼠标位置改变鼠标样式当鼠标在div的边缘和四个角时显示不同的样式,通过cursor修改当鼠标在div的边缘和四个角按下时记录具体坐标点位置, 并开始根据鼠标的 ...

js实现可拖拽的div

js实现可拖拽的div相关推荐

最新文章

热门文章