克隆可拖動div

Question

克隆可拖動的此腳本具有奇怪的效果。我創建了一個可拖動div的克隆，然後刪除原始文件。當我拖動克隆並將其放到第二個容器上時，會出現兩個可拖動對象：原始文本和附加到主體的克隆。之後都不可拖動。可能是什麼問題呢？

以下是創建元素並使其可拖動的代碼。它在頁面加載時從php腳本回顯。

 // Add link with tools 
     echo ' <div id="'.$url['ID'].'" class="link"> <img class="link_handle" src="http://www.google.com/s2/favicons?domain='.$urlico.'" align="middle" />&nbsp;<a href="'.$url->URL.'" target="_blank" onmouseOver="preview_link(\'show\', this, \''.$node['ID'].'\');" onmouseOut="preview_link(\'hide\', this, \''.$node['ID'].'\');" >'.$url->TITLE.'</a> <a title="Edit" class="link_button_edit" href="#" onClick=""></a><a title="Delete" class="link_button_delete" href="#" onClick="delete_link(\''.$url['ID'].'\', \''.$node['ID'].'\');"> </a> </div>'; 

     // Make link draggable 
     echo "<script type='text/javascript'>\n"; 
     echo ' $("#'.$url['ID'].'.link").draggable({ 
        handle: ".link_handle", 
        helper: function() { 
         $copy = $(this).clone(); 
         $(this).remove(); 
         return $copy; 
        }, 
        appendTo: "#page" , 
        scroll: false, 
        revert: true, 
       });'; 
     echo "</script>\n"; 

這裏是調用腳本的HTML。

<div id="page"> <!-- Begin page div --> 

    <script type="text/javascript"> 

    $(document).ready(function() { 

    // Make ajax call to recreate linkcards from XML data 
    $.ajax({ 
     url: "get_nodes.php", 
     type: "POST", 
     data: { }, 
     cache: false, 
     success: function (response) { 
      if (response != '') 
      { 
       $("#page").append(response);     
       alert(response); 
      } 
     } 
    }); 
    }); 
    </script> 

    </div> <!-- End page div --> 

我沒有這個訪問，它只在我的本地PC上。

Answer 1

發現如果我不刪除原來的代碼的作品。理想情況下，我更喜歡將原件從第一個容器拖到第二個容器的行爲。這隻能在容器沒有溢出的情況下完成：隱藏。克隆原始不能被刪除。這並不理想，但有效。以下是沒有行$(this).remove();的代碼。

// Make link draggable 
    echo "<script type='text/javascript'>\n"; 
    echo ' $("#'.$url['ID'].'.link").draggable({ 
       handle: ".link_handle", 
       helper: function() { 
        $copy = $(this).clone(); 
        return $copy; 
       }, 
       appendTo: "#page" , 
       scroll: false, 
       revert: true, 
      });'; 
    echo "</script>\n";