JavaScript拖拽

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <title>JS拖拽</title>    <style>        *{padding: 0; margin: 0; }        .box{width: 100px;height: 100px;background: blue;position: absolute; }    </style>    <script src="jquery.min.js"></script>    <script>        var isDown = false;        var ObjLeft, ObjTop, posX, posY, obj,offsetX,offsetY;        $(function(){            obj=$("#box");            obj.onmousedown = down;            document.onmousemove = move;            document.onmouseup = up;        })        function down(event){            isDown=true;            obj.style.cursor = "move";            ObjLeft = obj.offset().left;            ObjTop = obj.offset().top;        }    </script>    <script>        var isDown = false;        var ObjLeft, ObjTop, posX, posY, obj,offsetX,offsetY;        window.onload = function() {            obj = document.getElementById('box');            obj.onmousedown = down;            document.onmousemove = move;            document.onmouseup = up;        }        function down(event) {            obj.style.cursor = "move";            isDown = true;            ObjLeft = obj.offsetLeft;            ObjTop = obj.offsetTop;            posX = parseInt(mousePosition(event).x);            posY = parseInt(mousePosition(event).y);            offsetX=posX-ObjLeft;            offsetY=posY-ObjTop;        }        function move(event) {            if (isDown == true) {                var x=mousePosition(event).x-offsetX;                var y=mousePosition(event).y-offsetY;                var w = document.documentElement.clientWidth - obj.offsetWidth;                var h = document.documentElement.clientHeight - obj.offsetHeight;                console.log(x + ',' + y);                x=Math.min(w,Math.max(0,x));                y=Math.min(h,Math.max(0,y));                obj.style.left = x + 'px';                obj.style.top = y + 'px';            }        }

        function up() {            isDown = false;        }

        function mousePosition(evt) {            var xPos, yPos;            evt = evt || window.event;            if (evt.pageX) {                xPos = evt.pageX;                yPos = evt.pageY;            } else {                xPos = evt.clientX + document.body.scrollLeft - document.body.clientLeft;                yPos = evt.clientY + document.body.scrollTop - document.body.clientTop;            }            return {                x: xPos,                y: yPos            }        }    </script></head><body><div id="box" class="box"></div></body></html>

转载于:https://www.cnblogs.com/znj211985211/p/5340876.html

JavaScript拖拽相关推荐

Javascript 拖拽的一些高级的应用——逐行分析代码，让你轻松了解拖拽的原理...
我们看看之前的拖拽在周围有东西的时候会出现什么问题? 在高级浏览器中不会有啥问题,我们放到IE7下面测试一下,问题就出来了.如图我们可以很清楚的看到,文字都已经被选中了.那这个用户体验很不好,用起来 ...
功能强大的JavaScript 拖拽库 SortableJS
功能强大的JavaScript 拖拽库 SortableJS 官网:http://www.sortablejs.com/ 示例: 配置项: var sortable = new Sortable(el ...
简易而又灵活的Javascript拖拽框架（五）
====================================================== 注:本文源代码点此下载 ================================= ...
JavaScript 拖拽功能
JavaScript 拖拽功能 - Web前端工程师面试题讲解拖动图片 <img draggable="true"> 一开始 html 页面 <style> ...
简易而又灵活的Javascript拖拽框架（四）
一.开篇似乎拖拽已经被写烂了,没得写的了,可是我这次又来了- 上一次写的是跨列拖放,这次我要带给大家的是跨页拖放. 可以到这里来看看效果:示例效果说明:1.如果将方框拖动到页签上立刻释放掉的话,则 ...
HTML+JavaScript拖拽进度条和点击进度条(显示进度条百分比)
实现进度条拖拽功能和点击功能,并显示占比实现图: 附加改变区域位置,不影响进度条完整代码 <!DOCTYPE html> <html lang="zh_CN" ...
JavaScript拖拽函数
/此方法用于拖拽/ //参数:div1是父盒子(主要是控制要拖拽的盒子不能超出父类),div2是子盒子(即要拖动的盒子) //注意:div必须加绝对定位才能拖拽 function tuozhuai(d ...
JavaScript拖拽事件
window.onload =function(){ /* * 拖拽box1元素* - 拖拽的流程 1.当鼠标在被拖拽元素上按下时,开始拖拽 onmousedown * 2.当鼠标移动时被拖拽元素跟随 ...
JavaScript|拖拽|仿Android手机九点连线开锁
最简单的JavaScript拖动代码 <script> var xx=0,yy=0; function a(v) { xx=event.x-v.offsetLeft; yy=event.y ...

JavaScript拖拽

JavaScript拖拽相关推荐

最新文章

热门文章