JQuery UI Droppables掉在错误的地方

我想构建一个jQuery应用程序，用户可以从工具栏拖动图像到“画布”来创建自己的图片。原始项目保留在工具栏中（以防需要再次使用）和助手/克隆应放在用户离开它的位置的画布上。JQuery UI Droppables掉在错误的地方

问题是可拖拽似乎在拖拽完成后“跳跃”......这些项目没有放在正确的位置。

任何帮助表示赞赏...

“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); 
       } 
      } 
     }); 
});

希望告诉我我做错了什么或更好的方法来实现这一点。谢谢！

来源

2011-07-29 Rebecca

我已经把上的jsfiddle一个例子，您可以尝试：http://jsfiddle.net/hHKh9/

相当简单，在列表项可以被拖入列表2，但它使用的placeholder属性来定义一个css class是那么应用你将要进入的区域。

来源

2011-07-29 13:03:36

感谢您的回答......我希望可拖放的容器像一个画布 - 而不是一个排序列表 - 但创建一个拼贴画....我如何得到丢弃的项目不在列表中，但把它放置在它下降的确切位置？谢谢！ – Rebecca

啊我看到了，对不起，我没有正确阅读。 –

np ...任何想法？ – Rebecca

JQuery UI Droppables掉在错误的地方

回答

相关问题