コードをコピー コードは次のとおりです: 拖拽库<br>div, h2,p{margin:0;padding:0;}<br>body{font:14px/1.5 arial;}<br>#box{width:100px;height:100px;background:#fef4eb;padding:5px;margin :50px;border:1px ソリッド #f60;}<br>#box .title{height:25px;background:#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 = 0;<br> this._moveDrag = this.bind(this, this.moveDrag);<br> this._stopDrag = this.bind(this, this.stopDrag);<br><br> this.setOptions (オプション);<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 = "移動";<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 : 関数 (イベント)<br> { <br> var イベント = イベント || 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 イベント = イベント | | 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> binding: function (object, fnHandler)<br> {<br> return function ( )<br> {<br> return fnHandler.apply(object, argument) <br> }<br> }<br>}; <p> </p> <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="垂直ロック" /> ドラッグ アンド ドロップのステータス: 未開始
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
