使jQuery克隆对象在页面加载时可拖动

Question

我已经能够打开一个页面并将项目拖到表面上的div标签上。我也能够移动项目并调整它们的大小。

现在，我正在尝试在页面加载时将相同的对象加载到表面上，并且仍然可以移动它们，调整大小或删除克隆它们

我能够将对象添加到页面中，但是，当我移动对象时，它们会恢复到原始位置，我无法调整克隆对象的大小。

以下是我的代码，有人可以告诉我，我的实施可能会出错吗？

 $(document).ready(function (event, ui) {
    if ($('#rlvPdf_ctrl0_pnlPdfPage').length) {
      var clonedObject = $("#textbox").clone();
            clonedObject.addClass("dropped");

         //$(function () {
         //Make element draggable
         clonedObject.draggable({ revert: false});

         $("#rlvPdf_ctrl0_pnlPdfPage").droppable({
             accept: 'textbox',
             drop: function (event, ui) {
             $(this).append($(ui.draggable).clone());
                    $("#rlvPdf_ctrl0_pnlPdfPage.clonedObject").addClass("dropped");
                }
        });
    clonedObject.appendTo("#rlvPdf_ctrl0_pnlPdfPage");
 }

HTML

<div id="toolbar" class="toolbar">
     <div id="textbox" class="draggableItem">                
        <span class="draghandle">::</span>
        <span class="draggableItemContentText">Text Box</span>
     </div>
</div>
<div id="rlvPdf_ctrl0_pnlPdfPage" pageNum="1" >

CSS

     .dropped
    {
        position: absolute !important;
        display: inline-block;
        margin: 0 auto;
        background-color: wheat;
    }

    .draggableItem
    {
        position: relative;
        height: 18px;
        width: 150px;
        z-index: 1000;
        box-shadow: 0px 2px 2px black;
        display: inline-block;
    }