jQuery UI でドラッグ＆ドロップ

jQuery UI を使えば DOM を簡単にドラッグ＆ドロップさせることができます。
いくつかのパラメータによって細かい動作を設定できます。

3DS ウェブブラウザ用脱出ゲーム作成ツールのイベントエディタとして、
ドラッグ＆ドロップによるブロックプログラミングを実装中です。
条件分岐なんかもできるようにする予定です。

HTML5 でも Draggable API を使ってドラッグ＆ドロップを実装できるのですが、
ドロップ先にカチッとはまるような動きをさせたり、
スピードやアニメーションが設定できるため、
jQuery UI を使った方が個人的には使いやすいと思います。

jQuery UI は以下のサイトから落とせます。
デザインを変えたり、必要な機能だけをカスタマイズして落とすこともできます。
とりあえず使ってみるなら Stable ボタンを押せばOKです。
jQuery UI

zip を展開してみると大量のファイルが入っていることがわかります。
使用するのは

ui/minified/jquery-ui.min.js
themes/base/minified/jquery-ui.min.css
themes/base/minified/images

です。
これらを HTML で読み込んで使います。
jQuery UI を使うには jQuery が必要なので先に読み込んでください。
 css ファイルを置いたディレクトリ内に images ディレクトリを配置されるようにします。

あとは、jQuery オブジェクトの draggable() メソッドでドラッグ可能にできます。
droppable() も合わせて使うと、ドロップされた時のイベントを処理することができます。

$('#drag_element').draggable();

jQuery UI の公式サイトでソースコード付きのデモを見ることができます。
動作を変更できる様々なオプションが存在するので是非チェックしてみてください。
jQuery UI Draggable