ドラッグ可能な部分をクローン

Question

ドラッグ可能な部分をクローンするこのスクリプトには、奇妙な効果があります。私はdraggable divのクローンを作成し、元のを削除します。クローンをドラッグして2番目のコンテナにドロップすると、元のクローンとクローンがボディに2つ追加されます。それ以降はどちらもドラグ可能ではない。何が問題なの？

ここに、要素が作成され、ドラッグ可能にされたコードがあります。ページが読み込まれると、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

私がオリジナルを削除しないと、コードが機能することがわかりました。理想的には、最初のコンテナから2番目のコンテナに視覚的にドラッグされるような動作を好むでしょう。これは、コンテナにオーバーフロー：非表示がない場合にのみ実行できます。クローン作成では、オリジナルを削除することはできません。これは理想的ではありませんが、機能します。ここには、$(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";