search

Home >Web Front-end >JS Tutorial >jquery implements drag effect

jquery implements drag effect

高洛峰
高洛峰Original
2017-02-08 17:17:091033browse

Without further ado, please take a look at the code: 

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <style type="text/css">
 .page{text-align:left;}
 .dragDiv{border:1px solid #ddd; padding:10px; width:300px; margin:0 auto; border-radius:4px; box-shadow:0 1px 2px #fefefe; position: fixed;}
 </style>
 <div id="drag">
 <div>自己动手试试</div>
 <div>
 点击鼠标拖拖看
 </div>
 </div>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
 var _drag = {};
 _drag.top = 0; //拖动过的位置距离上边
 _drag.left = 0; //拖动过的位置距离左边
 _drag.maxLeft; //距离左边最大的距离
 _drag.maxTop; //距离上边最大的距离
 _drag.dragging = false; //是否拖动标志
 //拖动函数
 function bindDrag(el){ 
 var winWidth = $(window).width(), winHeight =$(window).height(),objWidth = $(el).outerWidth(), objHeight = $(el).outerHeight();
 _drag.maxLeft = winWidth - objWidth, _drag.maxTop = winHeight - objHeight;
 var els = el.style,x=0,y=0;
 var objTop = $(el).offset().top, objLeft = $(el).offset().left;
 $(el).mousedown(function(e){ 
 _drag.dragging = true;
 _drag.isDragged = true;
 x = e.clientX - el.offsetLeft; 
 y = e.clientY - el.offsetTop; 
 el.setCapture && el.setCapture(); 
 $(document).bind(&#39;mousemove&#39;,mouseMove).bind(&#39;mouseup&#39;,mouseUp);
 return false;
 }); 
 function mouseMove(e){ 
 e = e || window.event;
 if(_drag.dragging){
 _drag.top = e.clientY - y; 
 _drag.left = e.clientX - x;
 _drag.top = _drag.top > _drag.maxTop ? _drag.maxTop : _drag.top;
 _drag.left = _drag.left > _drag.maxLeft ? _drag.maxLeft : _drag.left;
 _drag.top = _drag.top < 0 ? 0 : _drag.top;
 _drag.left = _drag.left <0 ? 0 : _drag.left;
 els.top = _drag.top + &#39;px&#39;; 
 els.left = _drag.left+ &#39;px&#39;;
 return false;
 }
 } 
 function mouseUp(e){ 
 _drag.dragging = false; 
 el.releaseCapture && el.releaseCapture(); 
 e.cancelBubble = true;
 $(document).unbind(&#39;mousemove&#39;,mouseMove).unbind(&#39;mouseup&#39;,mouseUp); 
 }
 $(window).resize(function(){
 var winWidth = $(window).width(),
 winHeight = $(window).height(),
 el = $(el),
 elWidth = el.outerWidth(),
 elHeight = el.outerHeight(),
 elLeft = parseFloat(el.css(&#39;left&#39;)),
 elTop = parseFloat(el.css(&#39;top&#39;));
 _drag.maxLeft = winWidth - elWidth;
 _drag.maxTop = winHeight - elHeight;
 _drag.top = _drag.maxTop < elTop ? _drag.maxTop : elTop;
 _drag.left = _drag.maxLeft < elLeft ? _drag.maxLeft : elLeft;
 el.css({
 top:_drag.top,
 left:_drag.left
 })
 })
 } 
 bindDrag(document.getElementById(&#39;drag&#39;));
</script>
</html>

The above is the entire content of this article. I hope that the content of this article can bring some help to everyone's study or work. I also hope that more people will support PHP Chinese. net!

For more articles related to jquery’s drag effect, please pay attention to the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Prevent selection while draggingNext article：Prevent selection while dragging

Related articles

See more