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

web制作 Tags:

IE6/IE7にも対応しているのが嬉しいところですね。

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

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

公式サイト

<ul>
<li><a href="https://skidding.github.io/dragdealer/" target="_blank" title="Dragdealer JS">Dragdealer JS</a></li>

デモページ

Demo

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 のページに載っています。

あわせて読みたい記事

  1. JavaScriptでログインフォームの簡単な入力値チェックを行いたい
  2. 画面のスクロールに合わせて画像を読み込むjQueryプラグイン「LazyLoad with jQuery」
  

共有やブックマークなど

コメントは受け付けていません。