title: Calling methods for draggable element
body: <p>I have this code for a page with draggable divs.  Initially, I had the first two lines of the code, to make the divs draggable and to specify a drag handle.  Then I needed to add a helper function to clone the draggable.  When I added the helper function, it broke the code.  The divs weren't draggable anymore.  What is it about the way I wrote the code that might explain this?</p>
  
  <pre><code>&lt;script type='text/javascript'&gt;
    $('#".$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 
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>I found that if I have <code>.draggable();</code> and then another call <code>.draggable({});</code>, that second call breaks the draggable behavior.  Since I am new to this, there must be a basic issue with structuring the code that way.</p>
  
  <p>UPDATE</p>
  
  <p>The draggables are created by a php script called like this.</p>
  
  <pre><code>  &lt;div id="page"&gt; &lt;!-- Begin page div --&gt;
  
      &lt;script type="text/javascript"&gt;
      $(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);                 
                         }
                     }
                 });
      });
      &lt;/script&gt;
  
    &lt;/div&gt; &lt;!-- End page div --&gt;
  </code></pre>
  
  <p>This is the code in get_nodes.php that creates the draggables.</p>
  
  <pre><code>&lt;?php
  
  function get_nodes() {
  // load SimpleXML
  $nodes = new SimpleXMLElement('linkcards.xml', null, true);
  
  foreach($nodes as $node) // loop through 
  {
          // Add LinkCard
          echo "&lt;div id = '".$node['ID']."' class= 'linkcard ui-widget-content' style = 'top: ".$node-&gt;TOP."px; left: ".$node-&gt;LEFT."px; width: ".$node-&gt;WIDTH."px; height: ".$node-&gt;HEIGHT."px;'&gt; \n";
  
          echo "   &lt;p class = 'linkcard_header editableText'&gt;".$node-&gt;NAME."&lt;/p&gt;\n";
  
          echo "   &lt;div class='toolbar'&gt; &lt;a href='#' title='Options' class='ico_tools'&gt;&lt;/a&gt; &lt;a href='#' title='Delete' class='ico_delete' onClick=\"delete_linkcard('".$node['ID']."');\"&gt;&lt;/a&gt; &lt;/div&gt;\n";
  
          echo "   &lt;div class='link_drop_box'&gt;\n";
  
          // Add links
          foreach($node-&gt;LINKS-&gt;LINK as $url)
          { 
             $urlico = substr($url-&gt;URL,7);
  
             // Add link with tools
             echo ' &lt;div id="'.$url['ID'].'" class="link"&gt; &lt;img class="link_handle" src="http://www.google.com/s2/favicons?domain='.$urlico.'" align="middle" /&gt;&amp;nbsp;&lt;a href="'.$url-&gt;URL.'" target="_blank" onmouseOver="preview_link(\'show\', this, \''.$node['ID'].'\');" onmouseOut="preview_link(\'hide\', this, \''.$node['ID'].'\');" &gt;'.$url-&gt;TITLE.'&lt;/a&gt; &lt;a title="Edit" class="link_button_edit" href="#" onClick=""&gt;&lt;/a&gt;&lt;a title="Delete" class="link_button_delete" href="#" onClick="delete_link(\''.$url['ID'].'\', \''.$node['ID'].'\');"&gt; &lt;/a&gt; &lt;/div&gt;';
  
               // Make link draggable
               echo "&lt;script type='text/javascript'&gt;\n";
               echo "  $('#".$url['ID'].".link').draggable({ 
                       handle: '.link_handle', 
                       helper: function() {  
                             $copy = $(this).clone(); 
                             $(this).remove(); 
                             return $copy; 
                       },  
                       appendTo: 'body' ,  
                       scroll: false 
                       }); \n";
               echo "&lt;/script&gt;\n";       
          }
  
          echo "&lt;/div&gt; \n";
  
          // Add scrolling buttons
          echo '&lt;div class="scrolling_prev" title="Previous"&gt;&lt;/div&gt;';
          echo '&lt;div class="scrolling_next" title="Next"&gt;&lt;/div&gt;';
  
          // Add LinkCard tools
          echo "   &lt;div class='tools' &gt; &lt;a href='#' title='Add Link' class='ico_add' onClick=\"add_link('".$node['ID']."');\"&gt;&lt;/a&gt; &lt;a href='#' title='Search Links' class='ico_search' onClick=\"open_search('".$node['ID']."');\"&gt;&lt;/a&gt; &lt;/div&gt;\n";
  
          echo '  &lt;script type="text/javascript"&gt; 
                      $(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();
                          });
                      });
                  &lt;/script&gt;';
  
          echo "&lt;/div&gt; \n";
  
          echo "&lt;script type='text/javascript'&gt;\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 "&lt;/script&gt;\n";
  
          echo "&lt;script type='text/javascript'&gt;\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 "&lt;/script&gt;\n";
  
  }
          echo "&lt;script type='text/javascript'&gt;\n";
          echo "  $('.editableText').editableText();\n";                              
          echo "&lt;/script&gt;\n";
  
     return;
  }
  
  echo get_nodes();
  
  
  ?&gt;
  </code></pre>
  
  <p>UPDATE 10/24/2011</p>
  
  <p>Draggable specified like this echoes in the PHP response.</p>
  
  <pre><code>echo "&lt;script type='text/javascript'&gt;\n";
  echo "  $('#".$url['ID'].".link').draggable();\n";
  echo "&lt;/script&gt;\n";    
  </code></pre>
  
  <p>Draggable specified like this breaks the PHP response.  No information is returned from the code.</p>
  
  <pre><code>echo "&lt;script type='text/javascript'&gt;\n";
  echo '  $("#'.$url['ID'].'.link").draggable({
               handle: ".link_handle", 
               helper: function() {  
                  $copy = $(this).clone();
                  $(this).remove();
                  return $copy; 
               },
               appendTo: "body" ,
               scroll: false 
           }); \n';
  echo "&lt;/script&gt;\n";    
  </code></pre>
  
  <p>If I put each line in a separate echo statement, it doesn't help.  Is there a better way to send that statement to the page?</p>