克隆可拖动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";