ドラッグアンドドロップをもっと簡単に

uupaa.js JavaScript

uupaa.jsでは、Drag&Dropをこのように書くことができます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>minimum draggable</title>
<script id="uupaa.js" src="../../uupaa.js?load=ui,drag"></script>
<style>#drag { background: pink; }</style>
</head>
<body>
<div id="drag">draggable</div>
<pre>dummy text</pre>
<script>
uu.ready(function() { // DOMContentLoaded状態待ち
  var elm = uu.id("drag");
  uu.event.set(elm, "mousedown", F); // アタッチ
  uu.ui.element.toAbsolute(elm); // elmを絶対座標化
  function F(evt) {
    uu.event.stop(evt); // デフォルト動作を抑止 + イベントのバブルアップを停止
    switch (uu.event.type(evt)) { // イベントタイプのクロスブラウザ化(すり合わせ)
    case "mousemove": uu.module.drag.move(elm, evt); break; // 移動
    case "mousedown": uu.module.drag.save(elm, evt);        // 開始
    case "mouseup":   uu.event.toggle(F, uu.ua.ie ? elm : document, "mousemove,mouseup", true); // 終了
    }
  }
});
</script></body></html>

jQueryでゴリゴリ書くとすると、たぶんこんな感じになるんでしょうか(試してみたらSafari3とIE6で動かないみたいだけどこの場は気にしない)

<style>#drag { position: absolute; background: pink; }</style>
<script>
$(document).ready(function(){
  var offX, offY;
  $("#drag").mousedown(function(event){
    $(this).addClass("dragging");
    offX = event.pageX - parseInt($(this).css("left"));
    offY = event.pageY - parseInt($(this).css("top"));
    $(document).mousemove(function(event){
      $("div.dragging").css({ left: event.pageX - offX, top: event.pageY - offY });
      event.preventDefault()
    });
    $(document).mouseup(function(event){
      $("div.dragging").unbind("mousemove").removeClass("dragging");
      event.preventDefault()
    });
  });
});
</script>

Firefox3 + Firebugのプロファイラで計測してみると、一桁動作速度が違いました。
uupaa.jsは余計なnewとかクエリーが走らないので、このようなケースでは違いがはっきりと出るようです。

出来合いのモジュール(プラグイン)を使う場合は、uupaa.jsだとこうなります。

<script id="uupaa.js" src="../../uupaa.js?load=ui,effect,drag"></script>
<script>
uu.ready(function() {
  new uu.module.drag.free(uu.id("drag"));
});
</script>