Question

克隆一个draggable的这个脚本有一个奇怪的效果。我创建了一个可拖动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 -->

我没有这个可访问的，它只在我的本地电脑上。

Answer 1

发现如果我不删除原始代码的工作原理。理想情况下，我更喜欢原始视觉从第一个容器拖到第二个容器的行为。只有在容器没有overflow：hidden时才能执行此操作。用克隆原来不能删除。这不是理想的，但有效。以下是没有第$(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";

克隆一个可拖动的div

1 个答案: