jqueryメソッド js一般メソッド jsオブジェクト指向メソッドでドラッグアンドドロップ効果を実現_javascriptスキル

コードをコピー コードは次のとおりです: 🎜> *{margin: 0;padding: 0;} #drag{background: #ccc;height: 200px;width: 300px;text-align : センター ;line-height: 200px;position: 絶対;left: 20px;top: 20px;} ドラッグできるよ！ ！ //jquery メソッド ドラッグ /**$(function(){ var move = false; // 移動されたかどうか判断 var a = 0; var b = 0; $("#drag").mousedown(function (イベント){ move = true; a =event.pageX - parseInt($("#drag").css("left")); b = events.pageY - parseInt($ ("#drag").css("top")); }) $(document).mousemove(function(event){ if(move){ var x = イベント.pageX - a; var y = イベント.pageY - b; $("#drag").css({left: x,top: y}) } })。 Mouseup(function(){ move = false; }) })**/ //単純な JS 全般Method /**var ドラッグ = document.getElementById("ドラッグ"); var a = 0; var b = 0; drag.onmousedown = function(event){ var イベント = イベント||window.event; a =event.clientX-drag.offsetLeft; b =event.clientY-drag.offsetTop; drag.onmousemove = function(event){ var イベント = イベント||window.event; var x = events.clientX - a; var y = イベント.clientY - b; drag.style.left = x "px"; drag.style.top = y "px"; } document.onmouseup=function(){ drag.onmousemove = null; drag.onmouseup = null; } }**/ //js オブジェクト指向メソッド function Drag(obj){ this.drag = document.getElementById(obj); / /アラート(obj); this.a = 0; this.b = 0; this.drag.onmousedown = function(event){ that .マウスダウン(イベント); } } Drag.prototype.mousedown = function(event){ var イベント = イベント||window.event; this.a = イベント。 -this.drag.offsetLeft; this.b = events.clientY-this.drag.offsetTop; document.onmousemove=function(event){ that. (イベント) } document.onmouseup=function(){ that.mouseup() } } Drag.prototype.mousemove = function(event){ var イベント = イベント||ウィンドウ.イベント; var x = イベント.clientX - this.a; var y =event.clientY - this.b; x "px"; this.drag.style.top = y "px"; Drag.prototype.mouseup=function(){ document.onmousemove = null; document.onmouseup = null; new Drag("drag"); >