首先，看一下拖拽的原理。
被拖拽元素位置的變化，left值的變化其實就是滑鼠位置水平方向的變化值，e.clientx - 滑鼠左鍵按下時e.clientx。
top值的變化其實就是滑鼠位置豎直方向的變化值，e.clienty - 滑鼠左鍵按下時e.clienty。
另外就是設定拖拽的範圍，上下左右不得超過父元素所在的區域。
function drag (config)else
this.lock = true;
}drag.prototype
.getstyle = function(element, attr)else
}drag.prototype
.modown = function(e);
drag.prototype
.momove = function(e)
if(!this.lock)
};drag.prototype
.moup = function(e);
drag.prototype
.startdrag = function().bind(this);
this.movetarget
.onmousemove = function(e).bind(this);
this.movetarget
.onmouseup = function(e).bind(this);
}
在momove中增加了e.which判斷，e.which ==1 表示滑鼠左鍵按下，這是為了解決，滑鼠移除可拖拽範圍外，再移回時，無需按下左鍵，被拖拽元素就會跟著動的bug。
使用說明：
在使用時，被拖拽元素的id是必須引數，父元素的id(即可以拖拽移動的範圍)為可選引數，如果不傳遞父元素的id，則預設使用documentelement為可拖拽的範圍。
如果傳遞父元素，請別忘了將父元素的定位設為position:relative或position:absolute。
在使用時，先引入拖拽外掛程式的js檔案。
lang="en">
charset="utf-8">
name="generator"
content="editplus®">
name="author"
content="劉艷">
name="keywords"
content="關鍵字">
name="description"
content="描述">
documenttitle>
* #content
#drag
style>
head>
id = "content">
id = "drag" >
div>
div>
body>
html>
js拖拽功能元件例項
本例子是基於vue編寫，拖拽元件採用的是vue draggable 左側列表不能排序，不接收其它列表資料。右側列表接收左側的拖動資料，並轉殖左側拖動資料的副本到本身列表中。右側列表支援排序 npm install 安裝依賴 npm run serve 啟動服務 貼出 hello.vue fluid ...
Vue拖拽元件開發例項詳解
為什麼選擇vue?主要原因 對於前端開發來說，相容性是我們必須要考慮的問題之一。我們的專案不需要相容低版本瀏覽器。專案本身也是乙個資料驅動型的。加之，vue本身具有以下主要特性 使用虛擬dom 輕量級框架 高效的資料繫結 靈活的元件系統 完整的開發生態鏈。這就是我們為什麼選擇vue框架的一些原因。為...
JS元件開發
看了一篇關於寫js元件開發的部落格，居然看不懂，雖然我前幾天覺得自己把原型那塊弄的非常懂，但是看到上面實際應用的 時，還是一臉懵逼，不知道如何下面的呼叫這個元件的方式為何是這樣，我就寫了下面的乙個小例子 而且呢，你一定要搞清楚this的指向問題，在這裡this都是指向建構函式textcountfun...