JQuery UI Droppablesが間違った場所にドロップされました

Question

私はjqueryアプリケーションをビルドしようとしています。ユーザーは、ツールバーの画像をキャンバスにドラッグして独自の画像を作成できます。元のアイテムはツールバーに残っています（必要になった場合に備えて）。ヘルパー/クローンは、キャンバス上にドロップした場所にドロップする必要があります。

問題は、ドラッグが完了した後にドロップブルが「ジャンプ」するように見えることです。アイテムは正しい場所にドロップされません。

すべてのヘルプは高く評価され...

「maincanvasは、」私は私のキャンバスとして使用していますdiv要素の名前です。 ツールバー内の小さな画像にはすべて「親指」というクラスがあります。

$(document).ready(function() { 

$(".drag").draggable({ 
    helper: 'clone', 
    scope: 'designer', 
    containment: 'maincanvas', 
    //When first dragged 
      stop: function (ev, ui) { 
       var pos = $(ui.helper).offset(); 
       objName = "#clonediv" + counter 
       $(objName).css({ 
        "left": pos.left, 
        "top": pos.top 
       }); 
       $(objName).removeClass("drag"); 
       //When an existing object is dragged 
       $(objName).draggable({ 
        containment: 'parent', 
        stop: function (ev, ui) { 
         var pos = $(ui.helper).offset(); 
        } 
       }); 
      } 
     }); 

$("#maincanvas").droppable({ 
    accept: '.drag', 
    scope: 'designer', 
    tolerance: 'intersect', 
    drop: function (ev, ui) { 
       if (ui.helper.attr('className').search(/drag/) != -1) { 
        counter++; 
        var element = $(ui.draggable).clone(); 
        element.addClass("tempclass"); 
        $(this).append(element); 
        $(".tempclass").attr("id", "clonediv" + counter); 
        $("#clonediv" + counter).removeClass("tempclass"); 
        //Get the dynamically item id 
        draggedNumber = ui.helper.attr('id').search(/drag([0-9])/) 
        itemDragged = "dragged" + RegExp.$1 
        console.log(itemDragged) 
        $("#clonediv" + counter).addClass(itemDragged); 
       } 
      } 
     }); 
}); 

これを達成するために間違っている方法や良い方法を教えてください。ありがとう！あなたがしようとするため

Answer 1

私はjsfiddleに例を入れている：http://jsfiddle.net/hHKh9/

はリスト内の項目が1、リスト2にドラッグすることができ、非常に簡単ですが、それは、あるcss classを定義するためにplaceholderプロパティを使用しましたあなたがドロップする領域を適用しました。