HTML Element をドラッグで移動可能にする JavaScript ライブラリ

概要

ドラッグで Element を移動できるようにする JavaScript ライブラリです。

ダウンロード

下記リンクを右クリックしてファイルを保存してください。

ElementMover ver.1.0 (update to ver.1.0.1 at 2010-03-27 JST)

使用方法

まず、上記リンクからダウンロードしたスクリプトファイルを HTML 文書内で読み込みます。 head 要素内 ではなく body 要素を閉じる直前に script 要素を置いて読み込んでください。
ドラッグにより移動可能にしたい要素の class 属性に "movable" または "movable_rel" を追加してください。それだけでその要素はドラッグによる移動が可能になります。なお、指定した class が "movable" の場合は CSS の position プロパティが "absolute" になり、class 名を "movable_rel" とした場合は position プロパティは "relative" になります。
また、移動可能にしたい要素のどこでもドラッグ可能にするのではなく、ドラッグが有効な部分を移動可能な要素の一部だけにしたい場合、移動可能な要素の中に class 属性に "movable_controller" を追加した要素を入れると、その部分だけがドラッグ有効となります。
```
<div class="movable">
  <div class="movable_controller">この部分をドラッグすると移動する</div>
  <div>この部分をドラッグしても移動しない</div>
</div>
```


      動作デモ
      
        動作デモです。
        ライブラリ ElementMover 自体はクロスブラウザですが、下記のデモでは CSS 3 を使用しているためブラウザごとに表示が異なる可能性があります。
        Firefox 3.5、Opera 10.50、Safari 4.0 などの新しいブラウザでご覧になる事を推奨します。
        当然ながら JavaScript が有効でない場合は動作しませんので、JavaScript は有効にしてください。
      
      
        
          This is a movable element. Drag this element, and you can move this.
        
        
          Drag here!
            This is a movable element.
        
        
          Drag here!
          This is a movable element.
        
        
          Drag here!
          This is a movable element.
        
      
      動作確認ブラウザ
      下記のブラウザでの動作を確認しました。
      
        Firefox 3.6
        Opera 10.5
        Opera 9.6
        Safari 4.0
        Internet Explorer 8
        Internet Explorer 7
        Internet Explorer 6