jquery中draggable和droppable用法

jQuery中draggable和droppable如何实现把一个类似工具栏里的一个组件拖到其他的区域中，并且拖过去的组件位置还可以被拖动
具体点来说就是droppable中的onDrop如何实现？
目前我的代码是：

 onDrop: function (e, source) {
                var opt = $(source).draggable('options');
                var ep = e.point;
                document.getElementById("idShow").innerHTML = "left：" + dragX + "；top:" + dragY;

                var c = $(source).clone();
                c.css("z-index", "100").css("position", "absolute").css("left", dragX).css("top", dragY);

                c.draggable({
                    revert: false,
                    //proxy: 'clone',
                    onDrag: function (e) {
                        document.getElementById("idShow").innerHTML = "left：" + e.clientX + "；top:" + e.clientY ;
                        dragX = e.clientX - 64;
                        dragY = e.clientY - 58;
                    },
                });
                $(this).append(c);
            }

现在的问题是可以拖过去并且放到指定位置，但是如果再继续拖然后onDrop的时候又会复制一个。

你自己clone了对象，拖动clone的对象，直接操作源对象就不要clone就行了

     var opt = $(source).draggable('options');
    var ep = e.point;
    document.getElementById("idShow").innerHTML = "left：" + dragX + "；top:" + dragY;

    var c = $(source)/////////////////////////.clone();
    c.css("z-index", "100").css("position", "absolute").css("left", dragX).css("top", dragY);

    c.draggable({
        revert: false,
        //proxy: 'clone',
        onDrag: function (e) {
            document.getElementById("idShow").innerHTML = "left：" + e.clientX + "；top:" + e.clientY;
            dragX = e.clientX - 64;
            dragY = e.clientY - 58;
        },
    });
    ///////////////////////$(this).append(c);

http://www.poluoluo.com/jzxy/201307/232665.html