title: How can I make a jQuery UI 'draggable()' div draggable for touchscreen?
body: <p>I have a jQuery UI <code>draggable()</code> that works in Firefox and Chrome. The user interface concept is basically click to create a "post-it" type item.</p>
  
  <p>Basically, I click or tap on <code>div#everything</code> (100% high and wide) that listens for clicks, and an input textarea displays. You add text, and then when you're done it saves it. You can drag this element around. That is working on normal browsers, but on an iPad I can test with I can't drag the items around. If I touch to select (it then dims slightly), I can't then drag it. It won't drag left or right at all. I <strong>can</strong> drag up or down, but I'm not dragging the individual <code>div</code>, I'm dragging the whole webpage.</p>
  
  <p>So here's the code I use to capture clicks:</p>
  
  <pre><code>$('#everything').bind('click', function(e){
      var elem = document.createElement('DIV');
      STATE.top = e.pageY;
      STATE.left = e.pageX;
      var e = $(elem).css({
          top: STATE.top,
          left: STATE.left
      }).html('&lt;textarea&gt;&lt;/textarea&gt;')
      .addClass('instance')
      .bind('click', function(event){
          return false;
      });
      $(this).append(e);
  });
  </code></pre>
  
  <p>And here's the code I use to "save" the note and turn the input div into just a display div:</p>
  
  <pre><code>$('textarea').live('mouseleave', function(){
      var val = jQuery.trim($(this).val());
      STATE.content = val;
      if (val == '') {
          $(this).parent().remove();
      } else {
          var div  = $(this).parent();
          div.text(val).css({
              height: '30px'
          });
          STATE.height = 30;
          if ( div.width() !== div[0].clientWidth || div.height () !== div[0].clientHeight ) {
              while (div.width() !== div[0].clientWidth || div.height () !== div[0].clientHeight) {
                  var h = div.height() + 10;
                  STATE.height = h;
                  div.css({
                      height: (h) + 'px'
                  });     // element just got scrollbars
              }
          }
          STATE.guid = uniqueID()
          div.addClass('savedNote').attr('id', STATE.guid).draggable({
              stop: function() {
                  var offset = $(this).offset();
                  STATE.guid = $(this).attr('id');
                  STATE.top = offset.top;
                  STATE.left = offset.left;
                  STATE.content = $(this).text();
                  STATE.height = $(this).height();
                  STATE.save();
              }
          });
          STATE.save();
          $(this).remove();
      }
  });
  </code></pre>
  
  <p>And I have this code when I load the page for saved notes:</p>
  
  <pre><code>$('.savedNote').draggable({
      stop: function() {
          STATE.guid = $(this).attr('id');
          var offset = $(this).offset();
          STATE.top = offset.top;
          STATE.left = offset.left;
          STATE.content = $(this).text();
          STATE.height = $(this).height();
          STATE.save();
      }
  });
  </code></pre>
  
  <p>My <code>STATE</code> object handles saving the notes.</p>
  
  <p>Onload, this is the whole html body:</p>
  
  <pre><code>&lt;body&gt; 
      &lt;div id="everything"&gt;&lt;/div&gt; 
  &lt;div class="instance savedNote" id="iddd1b0969-c634-8876-75a9-b274ff87186b" style="top:134px;left:715px;height:30px;"&gt;Whatever dude&lt;/div&gt; 
  &lt;div class="instance savedNote" id="id8a129f06-7d0c-3cb3-9212-0f38a8445700" style="top:131px;left:347px;height:30px;"&gt;Appointment 11:45am&lt;/div&gt; 
  &lt;div class="instance savedNote" id="ide92e3d13-afe8-79d7-bc03-818d4c7a471f" style="top:144px;left:65px;height:80px;"&gt;What do you think of a board where you can add writing as much as possible?&lt;/div&gt; 
  &lt;div class="instance savedNote" id="idef7fe420-4c19-cfec-36b6-272f1e9b5df5" style="top:301px;left:534px;height:30px;"&gt;This was submitted&lt;/div&gt; 
  &lt;div class="instance savedNote" id="id93b3b56f-5e23-1bd1-ddc1-9be41f1efb44" style="top:390px;left:217px;height:30px;"&gt;Hello world from iPad.&lt;/div&gt; 
  
  &lt;/body&gt;
  </code></pre>
  
  <p>So, my question is really: how can I make this work better on iPad? </p>
  
  <p>I'm not set on jQuery UI, I'm wondering if this is something I'm doing wrong with jQuery UI, or jQuery, or whether there may be better frameworks for doing cross-platform/backward compatible draggable() elements that will work for touchscreen UIs.</p>
  
  <p>More general comments about how to write UI components like this would be welcome as well.</p>
  
  <p>Thanks!</p>
  
  <hr>
  
  <p><strong>UPDATE:</strong>
  I was able to simply chain this onto my jQuery UI <code>draggable()</code> call and get the correct draggability on iPad!</p>
  
  <pre><code>.touch({
      animate: false,
      sticky: false,
      dragx: true,
      dragy: true,
      rotate: false,
      resort: true,
      scale: false
  });
  </code></pre>
  
  <p>The <a href="http://plugins.jquery.com/project/touch" rel="noreferrer">jQuery Touch plugin</a> did the trick!</p>