调用可拖动元素的方法

Question

我有一个带有可拖动 div 的页面的代码。最初，我有前两行代码，使 div 可拖动并指定拖动手柄。然后我需要添加一个辅助函数来克隆可拖动对象。当我添加辅助函数时，它破坏了代码。 div 不再可拖动。我编写代码的方式可以解释这个问题吗？

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

我发现，如果我有 .draggable();，然后另一个调用 .draggable({});，则第二个调用会破坏可拖动行为。由于我对此很陌生，因此以这种方式构建代码肯定存在一个基本问题。

更新

可拖动对象是由一个名为这样的 php 脚本创建的。

  <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);                 
                       }
                   }
               });
    });
    </script>

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

这是 get_nodes.php 中创建可拖动对象的代码。

<?php

function get_nodes() {
// load SimpleXML
$nodes = new SimpleXMLElement('linkcards.xml', null, true);

foreach($nodes as $node) // loop through 
{
        // Add LinkCard
        echo "<div id = '".$node['ID']."' class= 'linkcard ui-widget-content' style = 'top: ".$node->TOP."px; left: ".$node->LEFT."px; width: ".$node->WIDTH."px; height: ".$node->HEIGHT."px;'> \n";

        echo "   <p class = 'linkcard_header editableText'>".$node->NAME."</p>\n";

        echo "   <div class='toolbar'> <a href='#' title='Options' class='ico_tools'></a> <a href='#' title='Delete' class='ico_delete' onClick=\"delete_linkcard('".$node['ID']."');\"></a> </div>\n";

        echo "   <div class='link_drop_box'>\n";

        // Add links
        foreach($node->LINKS->LINK as $url)
        { 
           $urlico = substr($url->URL,7);

           // 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: 'body' ,  
                     scroll: false 
                     }); \n";
             echo "</script>\n";       
        }

        echo "</div> \n";

        // Add scrolling buttons
        echo '<div class="scrolling_prev" title="Previous"></div>';
        echo '<div class="scrolling_next" title="Next"></div>';

        // Add LinkCard tools
        echo "   <div class='tools' > <a href='#' title='Add Link' class='ico_add' onClick=\"add_link('".$node['ID']."');\"></a> <a href='#' title='Search Links' class='ico_search' onClick=\"open_search('".$node['ID']."');\"></a> </div>\n";

        echo '  <script type="text/javascript"> 
                    $(document).ready(function($) {
                       $(".scrolling_prev", $("#'.$node['ID'].'")).mousedown(function() {
                            startScrolling($(".link_drop_box", $("#'.$node['ID'].'")), "-=50px");
                        }).mouseup(function() {
                            $(".link_drop_box", $("#'.$node['ID'].'")).stop()
                        });
                        $(".scrolling_next", $("#'.$node['ID'].'")).mousedown(function() {
                            startScrolling($(".link_drop_box", $("#'.$node['ID'].'")), "+=50px");
                        }).mouseup(function() {
                            $(".link_drop_box", $("#'.$node['ID'].'")).stop();
                        });
                    });
                </script>';

        echo "</div> \n";

        echo "<script type='text/javascript'>\n";
        echo "  $('#".$node['ID']."').resizable();\n";
        echo "  $('#".$node['ID']."').draggable();\n";
        echo "  $('#".$node['ID']."').draggable('option', 'handle', '.linkcard_header');\n";
        echo "  $('#".$node['ID']."').draggable({ stop: function(event, ui) { update_linkcard_xml('".$node['ID']."') } });\n";
        echo "</script>\n";

        echo "<script type='text/javascript'>\n";
        echo '  $("#'.$node['ID'].' '.CHR(46).'link_drop_box" ).droppable({
            drop: function( event, ui ) {
                var $item = ui.draggable;
                $item.fadeOut(function() {
                     $item.css( {"left":"", "top":"", "bottom":"", "right":"" }).fadeIn();
                });
                $item.appendTo( this );
            },
            out: function( event, ui ) {
            },
            accept: ".link",
        });';
        echo "</script>\n";

}
        echo "<script type='text/javascript'>\n";
        echo "  $('.editableText').editableText();\n";                              
        echo "</script>\n";

   return;
}

echo get_nodes();


?>

UPDATE 10/24/2011

像这样指定的 Draggable 在 PHP 响应中回显。

echo "<script type='text/javascript'>\n";
echo "  $('#".$url['ID'].".link').draggable();\n";
echo "</script>\n";    

像这样指定的 Draggable 会破坏 PHP 响应。代码中没有返回任何信息。

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

如果我将每一行放在单独的 echo 语句中，则没有帮助。有没有更好的方法将该语句发送到页面？

Answer 1

你必须结合这些选项：

$('#".$url['ID'].".link').draggable({
    handle: '.link_handle',
    helper: function() { 
        $copy = $(this).clone();
        $(this).remove();
        return $copy;
    }, 
    appendTo: 'body', 
    scroll: false 
});

===更新===

我做了一个示例。这里所有选项都有效：

• handle：您只能通过单击蓝色 div 来拖动 div
• appendTo：拖动期间可拖动帮助器的容器是正文
• scroll：禁用拖动时容器自动滚动（将其打开以查看不同的）
• helper：在示例中有四个可拖动对象，每个都有不同的 helper 选项:
  • original：原始div将被拖动
  • 克隆：拖动时将显示克隆
  • 函数 1：未删除的辅助函数与克隆选项的作用相同
  • 函数 2：您的辅助函数会删除原始的可拖动对象并在拖动时显示克隆

Answer 2

您只需要为要拖动的每个元素调用一次draggable()。任何其他调用基本上都会覆盖之前的可拖动功能。查看 jquery ui 站点 上的示例。