JavaScript 拖拽執行個體代碼

JavaScript 拖拽執行個體代碼_javascript技巧

最後更新：2017-01-19 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

一、JS 拖拽的實現執行個體代碼：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>拖拽js</title> <style type="text/css"> html, body { overflow:hidden; } body, div, { margin:0; padding:0; } body { color:#fff; font:12px/2 Arial; } p { padding:0 10px; margin-top:10px; } span { color:#ff0; padding-left:5px; } #box { position:absolute; width:300px; height:150px; background:#D5CDDA; border:2px solid #ccc; top:150px; left:400px; margin:0; } #drag { height:25px; cursor:move; background:#724a88; border-bottom:2px solid #ccc; padding:0 10px; }</style></head><body><div id="box"> <div id="drag">拖動地區</div> 被拖動的整個div </div></body></html><script src="js/jquery-1.10.1.min.js"></script><script type="text/javascript">$(function(){ moveBox($("#box"),$("#drag")) ;})//B被拖動的div，BT可拖動地區function moveBox(B,BT){ var bDrag = false; var _x,_y; BT.mousedown(function(event){var e=event || window.event;bDrag = true; _x=e.pageX-B.position().left; _y=e.pageY-B.position().top; return false }) $(document).mousemove(function(event){ if(!bDrag) return false; var e=event || window.event; var x=e.pageX-_x; var y=e.pageY-_y; console.log(B.position()); var maxL = $(document).width() - B.outerWidth(); var maxT = $(document).height() - B.outerHeight(); x = x < 0 ? 0: x; x = x > maxL ? maxL: x; y = y < 0 ? 0: y; y = y > maxT ? maxT: y; B.css({left:x,top:y}); return false }).mouseup(function(){ bDrag = false; return false })}</script>

二、 js之拖拽效果

主要原理：

1、當滑鼠按下時，記錄滑鼠座標，用到的是 onmousedown；

2、當滑鼠移動時，計算滑鼠移動的座標之差，用到的是 onmousemove；

3、當滑鼠鬆開時，清除事件，用到的是 onmouseup；

瞭解的知識：

1、div 的 offsetLeft 與 style.left 的區別：http://www.jb51.net/article/93142.htm

效果圖如下：

突然發現有沒有效果圖都一樣哈哈，不說廢話了，上代碼：

html代碼：

<!DOCTYPE html><html><head> <meta charset="utf8"> <title>js拖拽效果</title> <style type="text/css"> #div1 {  width : 200px;  height: 200px;  position: absolute;  background: #99dd33;  cursor: move; } </style></head><body> <div id="div1"></div></body><script type="text/javascript"> // js代碼</script></html>

js代碼：

window.onload function() { var disX = disY = 0;       // 滑鼠距離div的左距離和上距離 var div1 = document.getElementById("div1"); // 得到div1對象  // 滑鼠按下div1時 div1.onmousedown = function(e) {  var evnt = e || event;     // 得到滑鼠事件  disX = evnt.clientX - div1.offsetLeft; // 滑鼠橫座標 - div1的left  disY = evnt.clientY - div1.offsetTop; // 滑鼠縱座標 - div1的top    // 滑鼠移動時  document.onmousemove = function(e) {   var evnt = e || event;   var x = evnt.clientX - disX;   var y = evnt.clientY - disY;   var window_width = document.documentElement.clientWidth - div1.offsetWidth;   var window_height = document.documentElement.clientHeight - div1.offsetHeight;      x = ( x < 0 ) ? 0 : x;       // 當div1到視窗最左邊時   x = ( x > window_width ) ? window_width : x; // 當div1到視窗最右邊時   y = ( y < 0 ) ? 0 : y;       // 當div1到視窗最上邊時   y = ( y > window_height ) ? window_height : y; // 當div1到視窗最下邊時      div1.style.left = x + "px";   div1.style.top = y + "px";  };    // 滑鼠抬起時  document.onmouseup = function() {   document.onmousemove =null;   document.onmouup = null;  };    return false; };};

當然，這個雖然支援大部分瀏覽器，但是，我覺得div跟隨滑鼠的速度有點滯後，如果有好的解決辦法請聯絡我喔，謝謝！

以上就是js實現拖拽的執行個體代碼，有需要的小夥伴可以參考下,謝謝大家對本站的支援！

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More