Question

我有一个带有可拖动div的页面的代码。最初，我有代码的前两行，使div可拖动并指定拖动句柄。然后我需要添加一个辅助函数来克隆draggable。当我添加辅助函数时，它破坏了代码。 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({});，那么第二次通话就会破坏可拖动的行为。由于我是新手，因此必须存在以这种方式构造代码的基本问题。

更新

draggables是由一个名为这样的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中创建draggables的代码。

<?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();


?>

更新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 
});

=== UPDATE ===

我做了example。这里所有选项都有效：

handle：您只能通过点击蓝色div
appendTo：拖动期间可拖动帮助器的容器是正文
scroll：在禁用拖动时自动滚动容器（将其打开以查看不同的内容）
helper：在示例中有四个可拖动的，每个都有一个不同的helper选项：
- original：将拖动原始div
- clone：拖动时会显示一个克隆
- function 1：没有删除的帮助函数与clone选项相同
- function 2：您的帮助程序功能删除原始拖动功能并在拖动时显示克隆

Answer 2

您只需要为每个可拖动的元素调用draggable（）一次。任何其他调用将基本上覆盖以前的可拖动功能。查看jquery ui site上的示例。

调用draggable元素的方法

2 个答案: