https://segmentfault.com/a/1190000012646488??https://yangbo5207.github.io/wutongluo/

說明：此處只是記錄閱讀前端基礎進階的理解和總結，如有需要請閱讀上面的鏈接

1.如何讓元素動起來

要讓元素動起來就要修改元素的top、left 、translate 屬性。因為使用top、left會使頁面重繪，而translate不會，所以從性能上一般優先使用translate。另外因為translate是transform的一個用法，而transform是css3中的所以需要判斷一下瀏覽器是否支持，不同的瀏覽器寫法大概有幾種

['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform'] //判斷當前瀏覽器支持哪種transformfunction getTransform() {var transform = '';var divStyle = document.createElement("div").style;//不同的瀏覽器大概支持如下幾種transformvar transArray = ['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform']for (var x in transArray) {if (transArray[x] in divStyle)return transform = transArray[x];}return transform;}

2.獲取元素初始位置

//獲取目標元素樣式function getStyle(elem, property) {//ie 通過currentStyle獲取樣式，其他瀏覽器通過getComputedStyle,getComputedStyle是一個方法return document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(elem, false)[property] : elem.currentStyle[property];}//獲取元素的初始位置function getTargetPos(elem) {var pos = { x: 0, y: 0 };var transform = getTransform();if (transform ) {var transformValue = getStyle(elem,transform);if (transformValue == 'none') {elem.style[transform] = 'translate(0, 0)';return pos;} else {console.log(transformValue);var temp = transformValue.match(/[0-9,\s\.]+/)[0].split(',');return pos = {x: parseInt(temp[4].trim()),y: parseInt(temp[5].trim())};}} else {if (getStyle(elem, 'position') == 'static') {elem.style.position = 'relative';return pos;} else {var x = parseInt(getStyle(elem, 'left') ? getStyle(elem, 'left') : 0);var y = parseInt(getStyle(elem, 'top') ? getStyle(elem, 'top') : 0);return pos = {x: x,y: y};}}}

設置元素位置

//設置元素位置function setTargetPos(elem, pos) {var transform = getTransform();if (transform != "") {elem.style[transform] = "translate(" + pos.x + "px," + pos.y + "px)";} else {elem.style.left = pos.x + "px";elem.style.top = pos.y + "px";}return elem;}

3.事件

拖拽的原理：mousedown記錄元素和鼠標的初始位置，添加mousemove、mouseup事件，mousemove事件隨著鼠標移動獲取鼠標當前位置。移動后的鼠標位置-鼠標的初始位置=移動后的元素位置-元素的初始位置，如果用diss表示移動后的鼠標位置-鼠標的初始位置，那么元素移動后的位置=元素的初始位置+diss。這樣在鼠標移動時就可以得到元素的位置。mouseup移除mousemove、mouseup事件和做其他處理

function start(event) {startX = event.pageX; //獲取鼠標初始位置startY = event.pageY;var pos = getTargetPos(oElem);sourceX = pos.x;sourceY = pos.y;document.addEventListener('mousemove', move, false);document.addEventListener('mouseup', end, false);}function move(event) {var currentX = event.pageX;var currentY = event.pageY;var distanceX = currentX - startX;var distanceY = currentY - startY;setTargetPos(oElem, { x: (sourceX + distanceX).toFixed(), y: (sourceY + distanceY).toFixed() });}function end(event) {document.removeEventListener('mousemove', move);document.removeEventListener('mouseup', end);}

?

完整的js代碼

var oElem = document.getElementById("div1"); //document.getElementById("div1")必須在元素加載完成后才能獲取到元素，所以這個JavaScript必須放在body后，否則返回nullvar startX = 0;var startY = 0;var sourceX = 0;var sourceY = 0;oElem.addEventListener('mousedown', start, false);//獲取目標元素樣式function getStyle(elem, property) {//ie 通過currentStyle獲取樣式，其他瀏覽器通過getComputedStyle,getComputedStyle是一個方法return document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(elem, false)[property] : elem.currentStyle[property];}//判斷當前瀏覽器支持哪種transformfunction getTransform() {var transform = '';var divStyle = document.createElement("div").style;//不同的瀏覽器大概支持如下幾種transformvar transArray = ['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform']for (var x in transArray) {if (transArray[x] in divStyle)return transform = transArray[x];}return transform;}//獲取元素的初始位置function getTargetPos(elem) {var pos = { x: 0, y: 0 };var transform = getTransform();if (transform ) {var transformValue = getStyle(elem,transform);if (transformValue == 'none') {elem.style[transform] = 'translate(0, 0)';return pos;} else {var temp = transformValue.match(/[0-9,\s\.]+/)[0].split(',');return pos = {x: parseInt(temp[4].trim()),y: parseInt(temp[5].trim())};}} else {if (getStyle(elem, 'position') == 'static') {elem.style.position = 'relative';return pos;} else {var x = parseInt(getStyle(elem, 'left') ? getStyle(elem, 'left') : 0);var y = parseInt(getStyle(elem, 'top') ? getStyle(elem, 'top') : 0);return pos = {x: x,y: y};}}}//設置元素位置function setTargetPos(elem, pos) {var transform = getTransform();if (transform != "") {elem.style[transform] = "translate(" + pos.x + "px," + pos.y + "px)";} else {elem.style.left = pos.x + "px";elem.style.top = pos.y + "px";}return elem;}function start(event) {startX = event.pageX; //獲取鼠標初始位置startY = event.pageY;var pos = getTargetPos(oElem);sourceX = pos.x;sourceY = pos.y;document.addEventListener('mousemove', move, false);document.addEventListener('mouseup', end, false);}function move(event) {var currentX = event.pageX;var currentY = event.pageY;var distanceX = currentX - startX;var distanceY = currentY - startY;setTargetPos(oElem, { x: (sourceX + distanceX).toFixed(), y: (sourceY + distanceY).toFixed() });}function end(event) {document.removeEventListener('mousemove', move);document.removeEventListener('mouseup', end);}

?

我們可以把以上代碼封裝到一個模塊里面，使用的時候只要傳元素Id就可以了。

;(function () {var transform = getTransform();//構造函數function Drag(selector) {this.elem = typeof selector == 'Object' ? selector : document.getElementById(selector);this.startX = 0;this.startY = 0;this.sourceX = 0;this.sourceY = 0;this.init();//初始化 }//原型Drag.prototype = {constructor: Drag,init: function () { this.setDrag(); },//獲取目標元素樣式getStyle: function (property) {//ie 通過currentStyle獲取樣式，其他瀏覽器通過getComputedStyle,getComputedStyle是一個方法return document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(this.elem, false)[property] : this.elem.currentStyle[property];},//獲取元素的初始位置getTargetPos: function () {var pos = { x: 0, y: 0 };if (transform != "") {var transformValue = this.getStyle(transform);if (transformValue == 'none') {this.elem.style[transform] = 'translate(0, 0)';return pos;} else {var temp = transformValue.match(/[0-9,\s\.]+/)[0].split(',');return pos = {x: parseInt(temp[4].trim()),y: parseInt(temp[5].trim())};}} else {if (this.getStyle(this.elem, 'position') == 'static') {this.elem.style.position = 'relative';return pos;} else {var x = parseInt(this.getStyle('left') ? this.getStyle('left') : 0);var y = parseInt(this.getStyle('top') ? this.getStyle('top') : 0);return pos = {x: x,y: y};}}},//設置元素位置setTargetPos: function (pos) {if (transform != "") {this.elem.style[transform] = "translate(" + pos.x + "px," + pos.y + "px)";} else {this.elem.style.left = pos.x + "px";this.elem.style.top = pos.y + "px";}},setDrag: function () {var self = this;//因為綁定的方法是獨立執行的，this指向并不是Drag對象，所以必須使用閉包this.elem.addEventListener('mousedown', start, false);function start(event) {self.startX = event.pageX; //獲取鼠標初始位置self.startY = event.pageY;var pos = self.getTargetPos();self.sourceX = pos.x;self.sourceY = pos.y;document.addEventListener('mousemove', move, false);document.addEventListener('mouseup', end, false);}function move(event) {var currentX = event.pageX;var currentY = event.pageY;var distanceX = currentX - self.startX;var distanceY = currentY - self.startY;self.setTargetPos({ x: (self.sourceX + distanceX).toFixed(), y: (self.sourceY + distanceY).toFixed() });}function end(event) {document.removeEventListener('mousemove', move);document.removeEventListener('mouseup', end);}}}// 私有方法，僅僅用來獲取transform的兼容寫法function getTransform() {var transform = '',divStyle = document.createElement('div').style,transformArr = ['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform'],i = 0,len = transformArr.length;for (; i < len; i++) {if (transformArr[i] in divStyle) {return transform = transformArr[i];}}return transform;}window .Drag=Drag;//對外暴露構造方法 })();new Drag('div1');//拖拽實例

?

轉載于:https://www.cnblogs.com/lidaying5/p/9100601.html

總結

以上是生活随笔為你收集整理的前端基础进阶（十）：面向对象实战之封装拖拽对象的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。