Hatena::Groupjavascript

emergentのJavaScript入門日記

 | 

2008-11-07今日は結構ハマった…

Div要素をドラッグ可能にするMyDraggableクラスを自作してみた

02:45 | Div要素をドラッグ可能にするMyDraggableクラスを自作してみた - emergentのJavaScript入門日記 を含むブックマーク はてなブックマーク - Div要素をドラッグ可能にするMyDraggableクラスを自作してみた - emergentのJavaScript入門日記

ライブラリは使わず、できるだけ自分で考えながらやってみた。

オブジェクト指向プログラミングを意識しつつも、イベント関数内でのthisの指すオブジェクトの違いに戸惑いながらなんとか動くものができた。

実行の仕方とか格好悪いけど、それはこれからの課題としよう。

なんにしても、世の中のよく使われるライブラリとか作ってる人は凄いなぁ。

添削などあれば随時受け付けます。

var Class = function() { return function() { this.initialize.apply(this,arguments); }}

var MyDraggable = new Class();
MyDraggable.prototype = {
    initialize: function(elem, x, y) {
	this.elem = elem;
	this.elem.style.position = 'absolute';
	this.elem.style.left   = x + 'px';
	this.elem.style.top    = y + 'px';

	this.old_x = 0;
	this.old_y = 0;
	this.ondrag = false;
	this.onmousemove_orig = null;

	this.elem.onmousedown  = this.dragstart;
	this.elem.onmouseup    = this.dragend;
	this.elem.draggable = this;
    },
    dragstart: function(evt) {
	/* this = html element here */
	var thiz = this.draggable;
	thiz.old_x = evt.clientX;
	thiz.old_y = evt.clientY;
	thiz.onmm_orig = this.onmousemove;
	this.onmousemove = thiz.dragevent;
	thiz.ondrag = true;
    },
    dragend: function(evt) {
	/* this = html element here */
	var thiz = this.draggable;
	thiz.ondrag = false;
	this.onmousemove = thiz.onmm_orig;
	thiz.onmm_orig = null;
    },
    dragevent: function(evt) {
	/* this = html element here */
	thiz = this.draggable;
	if (thiz.ondrag) {
	    thiz.elem.style.left  = parseInt(thiz.elem.style.left)
		+ evt.clientX - thiz.old_x + 'px';
	    thiz.elem.style.top = parseInt(thiz.elem.style.top)
		+ evt.clientY - thiz.old_y + 'px';
	    if (thiz.onmousemove_orig) {
		thiz.onmousemove_orig(evt);
	    }
	    thiz.old_x = evt.clientX;
	    thiz.old_y = evt.clientY;
	}
    }
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<title>drag test</title>
<script type="text/javascript" src="/jstest/drag.js"></script>
<script type="text/javascript">
window.onload = function() {
    var rect = document.getElementById('rect');
    new MyDraggable(rect, 100, 100);
}
</script>
<style>
div.rect {
  width: 200px;
  height: 200px;
  background-color: #A9A9A9;
}
</style>

</head>

<body>
<h1>Drag Test</h1>

<hr>
<div id="rect" class="rect"/>

</body> </html>

参考

追記(2008/11/09)

コンストラクタの引数を修正。

クラス定義と使用するスクリプトを分けた。

RR2008/11/08 12:28スクロールバーがある場合、ドロップできませんね。

emergentemergent2008/11/08 18:06デモページで、ですか?
私の環境(Firefox 3)ではドラッグしたままマウスカーソルがウィンドウの外に出るとドロップできないですが、そのことでしょうか。

facetfacet2008/11/09 09:27初めまして。いろいろとやってて凄いなあと思いながら拝見させていただいています。
今回のですが、デモページ、マウスを速く動かしすぎると追随しませんでした(Firefox3)。
他のライブラリだと、
http://phpspot.org/blog/archives/2006/09/javascript_27.html
にある一覧から試してみたところ、唯一YUIのが追随しない時がありましたが、簡単には置き去りになりませんでした。
理由は分かりませんが、一応、お知らせまで。

emergentemergent2008/11/28 23:03どうも初めまして。コメントありがとうございます。
確かにすぐ追随できなくなりますね。
リンク先の記事を見ました。これらのソースを見ると勉強になりそうですね。

 |