js完美的div拖拽实例代码_javascript技巧

<script type="text/javascript"><BR>function Drag()<BR>{<BR> //初始化<BR> this.initialize.apply(this, arguments)<BR>}<BR>Drag.prototype = {<BR> //初始化<BR> initialize : function (drag, options)<BR> {<BR> this.drag = this.$(drag);<BR> this._x = this._y = 0;<BR> this._moveDrag = this.bind(this, this.moveDrag);<BR> this._stopDrag = this.bind(this, this.stopDrag);<br><br> this.setOptions(options);<br><br> this.handle = this.$(this.options.handle);<BR> this.maxContainer = this.$(this.options.maxContainer);<br><br> this.maxTop = Math.max(this.maxContainer.clientHeight, this.maxContainer.scrollHeight) - this.drag.offsetHeight;<BR> this.maxLeft = Math.max(this.maxContainer.clientWidth, this.maxContainer.scrollWidth) - this.drag.offsetWidth;<br><br> this.limit = this.options.limit;<BR> this.lockX = this.options.lockX;<BR> this.lockY = this.options.lockY;<BR> this.lock = this.options.lock;<br><br> this.onStart = this.options.onStart;<BR> this.onMove = this.options.onMove;<BR> this.onStop = this.options.onStop;<br><br> this.handle.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> this.drag.style.left = this.drag.offsetLeft + "px";<BR> this.drag.style.position = "absolute";<BR> this.drag.style.margin = "0"<BR> },<BR> startDrag : function (event)<BR> { <BR> var event = event || window.event;<br><br> this._x = event.clientX - this.drag.offsetLeft;<BR> this._y = event.clientY - this.drag.offsetTop;<br><br> this.addHandler(document, "mousemove", this._moveDrag);<BR> this.addHandler(document, "mouseup", this._stopDrag);<br><br> event.preventDefault && event.preventDefault();<BR> this.handle.setCapture && this.handle.setCapture();<br><br> this.onStart()<BR> },<BR> moveDrag : function (event)<BR> {<BR> var event = event || window.event;<br><br> var iTop = event.clientY - this._y;<BR> var iLeft = event.clientX - this._x;<br><br> if (this.lock) return;<br><br> this.limit && (iTop < 0 && (iTop = 0), iLeft < 0 && (iLeft = 0), iTop > this.maxTop && (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> this.onMove()<BR> },<BR> stopDrag : function ()<BR> {<BR> this.removeHandler(document, "mousemove", this._moveDrag);<BR> this.removeHandler(document, "mouseup", this._stopDrag);<br><br> this.handle.releaseCapture && this.handle.releaseCapture();<br><br> this.onStop()<BR> },<BR> //参数设置<BR> setOptions : function (options)<BR> {<BR> this.options =<BR> {<BR> handle: this.drag, //事件对象<BR> limit: true, //锁定范围<BR> lock: false, //锁定位置<BR> lockX: false, //锁定水平位置<BR> lockY: false, //锁定垂直位置<BR> maxContainer: document.documentElement || document.body, //指定限制容器<BR> onStart: function () {}, //开始时回调函数<BR> onMove: function () {}, //拖拽时回调函数<BR> onStop: function () {} //停止时回调函数<BR> };<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> bind : function (object, fnHandler)<BR> {<BR> return function ()<BR> {<BR> return fnHandler.apply(object, arguments) <BR> }<BR> }<BR>}; <P> <P> <P>//应用<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></script>

拖放状态：未开始