iPhone・iPadでもドラッグが可能なJSライブラリ「Dragdealer JS」

IE6/IE7にも対応しているのが嬉しいところですね。ただし入れ子にしている場合などCSSの組み方によってはIEでガタッとレイアウトが崩れる場合があったので注意が必要です。

  

この記事は1年以上前に書かれたものです。
情報が古い可能性があります。

公式サイト

デモページ

JS

<link rel="stylesheet" href="./dragdealer.css" type="text/css" />
<script type="text/javascript" src="./dragdealer.js"></script>
<script type="text/javascript">
window.onload = function() {
	new Dragdealer('my-slider',
	{
		//x,y座標を取得できる
		animationCallback: function(x, y) {
			var text = document.getElementById("text");
			if(x == 0) text.innerHTML = "始点です。";
			if(x == 1) text.innerHTML = "終点です。";
		}
	});
}
</script>

HTML

<div id="my-slider" class="dragdealer">
	<div class="red-bar handle">drag me</div>
</div>
<div id="text"></div>

その他詳しくは、Dragdealer JS のページに載っています。

  

共有やブックマークなど