複製程式碼 程式碼如下: 拖曳庫 <BR>div, h2,p{邊距:0;填滿: 0;}<BR>正文{字體:14px/1.5 arial;}<BR>#box{寬度:100px;高度:100px;背景:#fef4eb;填充:5px;邊距:50px;邊框:1px 實體#f60 ;}<BR>#box .title{高度:25px;背景:#f60;}<BR>#tool{margin-bottom:10px;}<BR> <BR>function Drag()<BR>{<BR> //初始化<BR> this.initialize.apply(this, argument)<BR>}<BR>Drag.prototype = {<BR>初始化<BR> initialize : function (drag, options)<BR> {<BR> this.drag = this.$(drag);<BR> this._x = this ._y = 00; this.bind(this, this.moveDrag);<BR> this._stopDrag = this.bind(this, this.stopDrag);<BR><br> this.setOptions (選項);<br><br> this.setOptions (選項);<br><BR> this.setOptions (選項);<br><> handle = this.$(this.options.handle);<br> this.maxContainer = this.$(this.options.maxContainer);<BR><br> 這個.maxTop = Math.max(this.><clientHeight , this.maxContainer.scrollHeight) - this.drag.offsetHeight;<br> this.maxLeft = Math.max(this.maxContainer.clientWidth, this.maxContainer.scrollWidth) - this.drag.offsetWidth<BR>🎜>🎜> this.limit = this.options.limit;<BR> this.lockX = this.options.lockX;<BR> this.lockY = this.options.lockX = this.options.lockX;<br> this.lockY = this.options.lockY;<br> this.lock = .options.this;<BR><BR> this.onStart = this.options.onStart;<br> this.onMove = this.options.onMove;<br> this.onStop = this.options.onStop;<br> this.onStop = this.options .onStop;<br> this.onStop = this.options .onStop;<this.>< .style.cursor = "move";<br><br> this.changeLayout();<BR><BR> this.addHandler(this.handle, "mousedown" , this.bind(this, this.startDrag)) <BR> },<BR> changeLayout : function ()<BR> {<BR> this.drag.style.top = this.drag.offsetTop "px";<BR> left.thisg.style.offsetTop "px";<BR> drag.offsetLeft "px";<BR> this.drag.style.position = "absolute";<BR> this.drag.style.margin = "0"<BR> },<br> ragD : <br> { <BR> var event = event || window.event;<br><br> this._x = event.clientX - this.drag.offsetLeft;<BR> drag.offsetTop;<br><br> this.addHandler (document, "mousemove", this._moveDrag);<BR> this.addHandler(document, "mouseup", this._stopDeventrag> .preventDefault && event.preventDefault();<br> this .handle.setCapture && this.handle.setCapture();<br><BR> this.onStart()<BR> ）<BR> {<BR> var event = event | | window.event;<br><br> var iTop = event.clientY - this._y;<BR> var iTop = event.clientY - this._y;<br> 🎜><br> if (this.lock) return;<br><br> this.limit && (iTop < 0 && (iTop = 0), iLeft < 0 && (iLeft = 0), iTop > .maxTop &this (iTop = this.maxTop), iLeft > this.maxLeft && (iLeft = this.maxLeft));<br><br> this.lockY || (this.drag.style.top = iTop "px");<BR> this.lockX || (this.drag.style.left = iLeft "px");<br><br> event.preventDefault && event.preventDefault();<br><br> 🎜> },<BR> stopDrag : function ()<BR> {<BR> this.removeHandler(document, "mousemove", this._moveDrag);<<movedrag> );<BR><BR> this.handle.releaseCapture && this.handle.releaseCapture();<br><br> this.onStop()<br> },<br> this.onStop()<BR> },<BR> this.onStop()<BR> },<BR>函數（選項）<BR> {<BR> this.options =<BR> {<BR> handle: this.drag, // //鎖定位置<BR> lockX: false, // 鎖定水平位置<BR> lockY: false, // 鎖定垂直位置<BR> maxContainer: >ent.documentElement. onStart: function () {}, //開始時回呼函數<BR> onMove: function () {}, //拖曳時回呼函數<BR> onStop: > };<BR> for (var p in options) this.options[p] = options[p]<BR> },<BR> //ID<BR>を取得 $ : function (id)<BR> {<BR> return typeof id === "string" ? document.getElementById(id) : id<BR> },<BR> //バインディングイベントを追加します<BR> addHandler: function (oElement, sEventType, fnHandler)<BR> {<BR> return oElement.addEventListener ? oElement.addEventListener(sEventType, fnHandler, false) : oElement.attachEvent("on" sEventType , fnHandler)<BR> },<BR> //バインドされたイベントを削除します<BR> RemoveHandler: function (oElement, sEventType, fnHandler)<BR> {<BR> return oElement.removeEventListener ? oElement.removeEventListener(sEventType, fnHandler, false) : oElement.detachEvent("on" sEventType, fnHandler)<BR> },<BR> //イベントをオブジェクトにバインド<BR> binding: function (object, fnHandler)<BR> {<BR> return function ( )<BR> {<BR> return fnHandler.apply(object, argument) <BR> }<BR> }<BR>}; <P> <P> <P>//Application<BR>window.onload = function ()<BR>{<BR> var oBox = document.getElementById("box"); <BR> var oTitle = oBox.getElementsByTagName("h2")[ 0];<BR> var oSpan = document.getElementsByTagName("span")[0];<BR> var oDrag = new Drag(oBox, {handle:oTitle, limit:false});<br><br> var aInput = document.getElementsByTagName("input");<br><br> //ロック範囲インターフェース<BR> aInput[0].onclick = function ()<BR> {<BR> oDrag.limit = !oDrag.limit ;<BR> this.value = oDrag.limit ? "ロック範囲" : "ロック範囲"<BR> };<br><br> //水平ロック インターフェイス<BR> aInput[1].onclick = function ( ) <BR> {<BR> oDrag.lockX = !oDrag.lockX;<BR> this.value = oDrag.lockX ? "水平ロックを解除" : "水平ロック"<BR> };<br><br> / /垂直ロック インターフェイス<BR> aInput[2].onclick = function ()<BR> {<BR> oDrag.lockY = !oDrag.lockY;<BR> this.value = oDrag.lockY "垂直ロックをキャンセルします": "垂直ロック"<BR> };<br><br> //ロック位置インターフェイス<BR> aInput[3].onclick = function ()<BR> {<BR> oDrag.lock = !oDrag.lock;<BR> this.value = oDrag.lock ? "位置のロックを解除" : "位置のロック"<BR> };<br><br> //ドラッグ開始時のメソッド<BR> oDrag.onStart = function ()<BR> {<BR> oSpan.innerHTML = "ドラッグ開始" <BR> };<br><br> //ドラッグ開始時のメソッド<BR> oDrag.onMove = function ()<BR> {<BR> oSpan .innerHTML = "left :" this.drag.offsetLeft ", top:" this.drag.offsetTop <BR> };<br><br> //ドラッグ開始時のメソッド<BR> oDrag.onStop = function () <BR> {<BR> oSpan.innerHTML = "ドラッグ終了" <BR> };<BR>};<BR>gt; < input type="button" value="垂直ロック" /> ドラッグ アンド ドロップのステータス: 未開始
