Вызов методов для перетаскиваемого элемента

У меня есть этот код для страницы с перетаскиваемыми 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();


?>

ОБНОВЛЕНИЕ 24.10.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";    

Если я помещу каждую строку в отдельный оператор эха, это не поможет. Есть ли лучший способ отправить это заявление на страницу?