概要
DIV要素をドラッグできるようにしたいと思い、コードを書いています。
そのコードをJavaScriptのprototypeを使っているのですが、うまく関数を実行できません。
その理由と解決策が知りたいです。
質問本文
DIV要素をドラッグできるようにしたいと思い、コードを書いています。
以下のコードをJavaScriptのprototypeを使っているのですが、どうも、孤立したメソッドのように扱われているようです。
prototypeの中でメソッドをバインドして利用することはできないのでしょうか?
一応、 Dragpos.prototype.test
のような関数を定義し、this.test()
のように呼び出すことは可能でした。
そのときにthis.panel
をconsole.log
で表示させてもうまく表示ができます。
しかし、Dragpos.prototype.move
は、「TypeError: this.move is not a function
」と出ます。
この理由がまだ勉強中なのでわかりません。
ご存知の方がいらっしゃいましたら、ご教授ください。
よろしくお願いいたします。
JavaScript
1var Dragpos = (function() { 2 // プロパティ定義エリア 3 var panel = ''; // ドラッグさせたいオブジェクトを保存するもの 4 var drag = false; // trueのとき、オブジェクトが移動するというフラグ 5 var mousemove = {}; 6 7 /** 8 * コンストラクタ 9 * @param {Object} element ドラッグさせたいオブジェクト 10 * @constructor 11 */ 12 function Dragpos(element) { 13 // 初期値で与えられた要素をプロパティとして持たせる 14 this.panel = document.getElementById(element); 15 16 // フラグを(一応)初期化しておく 17 this.drag = false; 18 19 // アクションをすべてバインド 20 document.addEventListener('mousedown', this.mouseDown, false); 21 document.addEventListener('mouseup', this.mouseUp, false); 22 document.addEventListener('mousemove', this.mouseMove, false); 23 24 } 25 26 27 // クリックされたとき 28 Dragpos.prototype.mouseDown = function(e){ 29 drag = true; 30 } 31 32 33 34 // クリックが離されたとき 35 Dragpos.prototype.mouseUp = function(e){ 36 drag = false; 37 } 38 39 40 41 // マウスが移動したとき 42 Dragpos.prototype.mouseMove = function(e){ 43 if (drag == true){ 44 //this.move(e); 45 console.log(this.panel); 46 } 47 } 48 49 50 51 // 要素の座標を移動させる処理 52 Dragpos.prototype.move = function (e) { 53 var offsetX; // スクロール位置(横) 54 var offsetY; // スクロール位置(縦) 55 var x; // x座標 56 var y; // y座標 57 var rect = {}; // 四角形の(x, y, w, h)が入る 58 59 // 四角形の(x, y, w, h) = (X座標, Y座標, 幅, 高さ)を取得 60 rect.x = this.panel.offsetLeft; 61 rect.y = this.panel.offsetTop; 62 rect.w = this.panel.clientWidth; 63 rect.h = this.panel.clientHeight; 64 65 offsetX = rect.w / 2; 66 offsetY = rect.h / 2; 67 68 if (e.pageX > rect.x && e.pageX < rect.x + rect.w) { 69 if (e.pageY > rect.y && e.pageY < rect.y + rect.h) { 70 x = e.pageX - offsetX; 71 y = e.pageY - offsetY; 72 this.panel.style.position = 'absolute'; 73 this.panel.style.top = y + 'px'; 74 this.panel.style.left = x + 'px'; 75 } 76 } 77 78 } 79 80 return Dragpos; 81})(); 82
html
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <!-- ページタイトル --> 6 <title>ドラッグテスト</title> 7 8 <!-- メタタグエリア --> 9 <meta charset="utf-8"> 10 11 <!-- JS読み込み --> 12 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 13 <script src="dragpos.js"></script> 14 15 <!-- ページ内CSS --> 16 <style> 17 #foo { 18 width: 150px; 19 height: 150px; 20 margin: 20px; 21 color: #CCC; 22 background: #EFEFEF; 23 border: 3px dotted #DDD; 24 font-size: 2em; 25 font-weight: 900; 26 text-align: center; 27 line-height: 150px; 28 } 29 </style> 30 31</head> 32 33<body> 34 35 <div id="foo" draggable="true">Move</div> 36 37 38 <script> 39 $(document).ready(function(){ 40 // 要素を動かせるようにする 41 var dp = new Dragpos('foo'); 42 }); 43 </script> 44 45</body> 46 47</html> 48
参考
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/09/05 23:56