jqueryでドラッグアンドドロップ

 まず、jqueryuiからjsをダウンロードします。
uiとdraggableとdroppableだけでいいです。今回は。

ドラッグ対象にクラスをつけます。今回はhoge。画像です。

<img id="hoge1" class="hoge" src="hoge1.jpg"  width="86" height="108" />

この画像はリスト的にだーっと並んでいて、idがhoge1・・・nと言うようにつけられています。

ドロップするブロックにもクラスをつけます。今回はfuga。
ドロップする場所は、わかりやすくするために枠をとってます。

<div  class="fuga" style="border: 1px solid red; width: 96%; height: 100px; float: left;"></div>

で、ロード時に読み込まれる場所に初期設定を書いておきます。
関数に切り出しているのは、今作っているアプリは、動的にドロップする場所が増減するので、増減させたタイミングで初期化するためです。

function init(){
    j$('.hoge').draggable({helper: 'clone'});
   
    j$('.fuga').droppable({
      accept: '.hoge',
      activeClass: 'active',
      drop:   function(ev, ui) {
        if(!isExist(ev)){
             ui.draggable.clone().appendTo(this);
        }
      }
    });
}

ui.draggable.clone().appendTo(this);というのは、ドロップしたときにドロップした場所にオブジェクトをコピーするって感じで、colne()をとると、コピーじゃなくて移動する感じになります。

コピーということで、同じオブジェクトを同じドロップ場所に何回もコピーできちゃいます。
それが困る状況だったのでisExist()という重複チェックをする関数をかましています。

function isExist(ev){
    $target = ev.target;
    var bool = false;
    j$(".hoge", $target).each(function(){
        if(this.id == ev.originalTarget.id){
            bool = true;
        }
    });
    return bool;
}

これだけで、特定のものを特定の場所に重複なくドロップすることができますスゲー。
自分用なんで、この辺でカンベンしてください。