Question

This script to clone a draggable has a weird effect. I create a clone of a draggable div and then remove the original. When I drag the clone and drop it on a second container, two draggables appear: the original and the clone appended to the body. Neither is draggable after that. What could be the problem?

Here is the code where the element is created and made draggable. It is echoed from a php script when the page is loaded.

       // 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";

Here is the HTML where the script is called.

  <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 -->

I don’t have this accessible, it is only on my local pc.

Answer 1

Found out that if I don’t remove the original the code works. Ideally, I’d prefer the behavior where the original is visually dragged from the first container to the second. This can only be done if the container does not have overflow: hidden. With cloning the original cannot be delete. This is not ideal but works. Here is the code that worked without the line $(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";