ドラッグアンドドロップを可能にするプログラムの作成を行います。<br />
      はじめに、ドラッグアンドドロップさせる要素をHTMLで作成します。<br />
      ここでは、32pxの赤い正方形を使います。<br /><br />

<pre>
&lt;div id="block" style="background-color: red; width: 32px; height: 32px;"&gt;&lt;/div&gt;
</pre>
    <div style="background-color: red; width: 32px; height: 32px;"></div><br />

      ここで、ドラッグアンドドロップとはどういう機能かを考えます。<br />
    <ul>
      <li>マウスボタンを押すと移動可能な状態になる</li>
      <li>移動可能な状態でマウスを動かすと、要素も一緒に移動する</li>
      <li>マウスボタンを放すと、移動可能状態が終了する</li>
    </ul>


      では、マウスボタンを押すと移動可能な状態になる処理から作っていきます。<br />
      ある要素の上でマウスボタンが押されたとき、というイベントはmousedownです。<br />
      また、マウスが移動したときというイベントはmousemoveです。 mousemoveは要素上以外の場所でも起こる可能性があるので、$(window).mousemove(~~)とし、windowのイベントとします。<br />
      下のコードでは、mousedownが起こると、windowのmousemoveに移動処理を登録しています。<br /><br />
<pre>
    $("#block").mousedown(function(){
        $(window).mousemove(function(){
            // 移動処理
        });
    });
</pre>

      次に、移動処理の実際の内容について説明していきます。<br />
      まず、mousemoveに与えている関数が、function(e){}と引数eを受け取っていることに注意してください。<br />
      この変数eはマウスポインタの座標などの情報を保持しています。 e.pageX, e.pageYにそれぞれ左端からの距離、上端からの距離が入っています。<br />
      blockのstyle属性を操作して、left, topをそれぞれe.pageX, e.pageYに設定することにより移動させています。<br />
      また、これはCSSの性質上座標を指定して配置するためには、position: absoluteとする必要があるため、そのように設定しています。<br />

    
<pre id="sample2">
$("#block").mousedown(function(){
    $(window.document).mousemove(function(e){
        $("#block").css({
            position: "absolute",
            top: e.pageY,
            left: e.pageX
        });
    });
});
</pre>

    <input type="button" value="サンプル実行" onclick="execute_sample('#sample2')" /><br /><br />

    <div id="block" style="background-color: red; width: 32px; height: 32px;"></div><br />

      「サンプル実行」を押すと、「赤い要素上でマウスボタンを押すと要素が移動可能な状態になる」「移動可能な状態でマウスを動かすと、要素も一緒に移動する」ということができました。<br />
      最後にマウスボタンを放すと移動可能状態を終了させる処理を追加します。<br /><br />

      先述のコードにドラッグアンドドロップのドロップのドロップ部分の処理をつけます。<br>
      マウスボタンを離すと移動が終了するようにします。<br />
<pre id="sample3">
$("#block2").mousedown(function(){
    $(window.document).mousemove(function(e){
        $("#block2").css({
            position: "absolute",
            top: e.pageY,
            left: e.pageX
        });
    });
});

$(window.document).mouseup(function(){
    $(window.document).unbind("mousemove");
});
</pre>
    <input type="button" value="サンプル実行" onclick="execute_sample('#sample3');"><br /><br />

    <div id="block2" style="background-color: red; width: 32px; height: 32px;">&nbsp;</div><br />