title: Why can't jQuery UI sortable elements be dragged from a handle?
body: <p>I have a page that add fields to a fake form so that the user can look at it before generating the source.</p>
  
  <p>I'm trying to give the user the ability to sort and order the fields inside the form. I use jQuery for my ajax and animations, so I decided to use jquery UI to do the sorting.</p>
  
  <p>My fields are added dinamicly, so I delegate all my events, and I use the <code>sortable('refresh');</code> every time a new field is added.</p>
  
  <p>My GUI has icons for fields options, so I added the <code>handle</code> option to the <code>sortable()</code> method, but it doesn't recognize it at all!</p>
  
  <p>Here is a demo of the GUI with the problem (it's in arabic and still in alpha so no IE7-6 support, but it uses icons so it will be easy to use ^^): <a href="http://mahersalam.co.cc/projects/namodgMaker/" rel="nofollow">http://mahersalam.co.cc/projects/namodgMaker/</a></p>
  
  <p>Just add any field from the red buttons, and try to drag from the drag button, it doesn't work. If I remove the <code>handle</code> it works perfectly!</p>
  
  <p>You can see that I log the <code>handle</code> value to the console, but it always logs the sortable object... There is a global object <code>NamodgMaker</code> is you want to experiment with it.</p>
  
  <p>Here is the part that adds the fields and attach the <code>sortable()</code> method:</p>
  
  <pre><code>addField: function( type ) {
  
      var $html = $(this.fields[type]); // 'this' here is NamodgMaker, and `fields` is from an ajax request
  
      if (type == 'select') {
          $html
              .find('select')
                  .styleNamodgSelects({
                      optionsRight: -6,
                      optionsTop: 38
                  });
      }
  
      $html.appendTo(this.formHolder);
  
      if ( this.formHolder.data('sortable') ) {
  
          this.formHolder.sortable('refresh');
          console.log( this.formHolder.sortable( "option", "handle" ) );
          return
      }
  
      this.formHolder
          .sortable({
              containment: 'parent',
              handle: '.drag-field-option'
          })
          .data('sortable', true)
  
      console.log( this.formHolder.sortable( "option", "handle" ) );
  }
  </code></pre>
  
  <p>This is my first time with jQuery UI, So what am I doing wrong? </p>
  
  <p><strong>Update:</strong> I found out that the <code>$.data()</code> was causing <code>sortable</code> to return the wrong options. I modified the code to use <code>sortable()</code>'s own checking method:</p>
  
  <pre><code>addField: function( type ) {
  
      var $html = $(this.fields[type]);
  
      if (type == 'select') {
          $html
              .find('select')
                  .styleNamodgSelects({
                      optionsRight: -6,
                      optionsTop: 38
                  });
      }
  
      $html.appendTo(this.formHolder);
  
      if ( ! this.formHolder.sortable( "option", "disabled")  ) {
  
          this.formHolder.sortable('refresh');
          console.log( 'refreshed :' + this.formHolder.sortable( "option", "handle" ) );
          return
      }
  
      this.formHolder
          .sortable({
              containment: 'parent',
              handle: '.drag-field-option'
          })
  
  
      console.log( this.formHolder.sortable( "option", "handle" ) );
  }
  </code></pre>
  
  <p>Now the console logs the right selector but still the sorting functionality is not working.</p>
  
  <p><strong>Update 2</strong>: I was able to solve the problem by changing the handle element from a <code>button</code> to a <code>a</code>.</p>