首先看一下演示效果，項目在線演示
實現思路：將元素拖動分為三部分，鼠標按下，鼠標移動，鼠標彈起，分別監聽三個事件。首先是定義四個變量startX，startY，sourceX，sourceY，分別代表鼠標點擊的橫縱坐標和物體的橫縱坐標（左上角坐標），接著定義鼠標點擊的監聽事件，當鼠標點擊時，記錄鼠標點擊的坐標還有物體的坐標，然后給文檔加上鼠標移動和鼠標彈起事件

this.elem.addEventListener('mousedown', start, false); function start(event){self.startX = event.pageX; //記錄鼠標點擊的坐標self.startY = event.pageY;var pos = self.getPosition(); //獲取物體的坐標對象self.sourceX = pos.x; //記錄物體的坐標self.sourceY = pos.y; document.addEventListener('mousemove', move, false); //添加鼠標移動和鼠標彈起事件document.addEventListener('mouseup', end, false); }

當鼠標移動時，獲取鼠標移動后的坐標，用移動后的坐標減去點擊時的坐標，得到移動坐標的差值，在分別加到物體的x，y坐標上；當鼠標彈起時，移除文檔對象的鼠標移動和鼠標彈起監聽事件

function move(event){var currentX = event.pageX; //獲取鼠標移動后的坐標var currentY = event.pageY;var disX = currentX - self.startX; //獲取物體應該移動的距離var disY = currentY - self.startY;self.setPosition({ //設置新的位置x: (self.sourceX + disX).toFixed(),y: (self.sourceY + disY).toFixed()}) }function end(event){document.removeEventListener('mousemove', move); //移除文檔對象的鼠標移動和鼠標彈起監聽事件document.removeEventListener('mouseup', end); }

為了減少回流，我在移動時使用了css3的transform屬性。但在使用前我們要要判斷瀏覽器是否能夠使用，如果不能只能通過改變元素left和top值達到移動的目標

function getTransform(){ //獲取style中的transform屬性，如果沒有則返回空字符串var transform = '',divStyle = document.createElement('div').style,_transforms = ['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform'],i = 0,len = _transforms.length;for(;i < len; i++){if(_transforms[i] in divStyle){return transform = _transforms[i];}}return transform; }setPosition: function(pos){ //設置物體坐標if(transform){ //判斷transform是否能用，能的話直接使用translate，不能的話就改變left和top的值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';} }

上面只介紹了關鍵代碼，全部源碼在這 https://jsrun.net/ZEXKp/edit，這里源碼用了面向對象的思想進行了封裝，可以通過下面方式直接創建一個可以移動的元素

new Drag(selector) //selector可以是css選擇器，如'#dragObject'，還可以是document的標簽實例

若有什么問題，歡迎提問

總結

以上是生活随笔為你收集整理的js实现元素拖动效果的全部內容，希望文章能夠幫你解決所遇到的問題。

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