title: jQuery sortable cannot click into input
body: <p>Hi I'm using jquery sortable with two linked lists, I have input fields within this lists which at times will need to be have a custom URL attached. However for some reason the sortable function is disabling the input fields.</p>
  
  <h3>to be clear i am not able to click into the input field and type anything</h3>
  
  <p>anyone know how this can be fixed?</p>
  
  <p>My code is below or view a <a href="http://jsfiddle.net/gutigrewal/Sm28x/" rel="nofollow">jsFiddle</a> </p>
  
  <p>js:</p>
  
  <pre><code>     $(function() {
          $( "#sortable1" ).sortable({
            cancel: ".ui-state-disabled"
      });
  
  $( "#sortable2" ).sortable({
    cancel: ".ui-state-disabled",
      receive: function (event, ui) {
           if (ui.item.hasClass("defaultbanner")) {
               $(ui.sender).sortable('cancel');
               alert("This banner is a default banner, it can be sorted but not removed.");
  
           }
       }
  });
  
  $( "#sortable1, #sortable2" ).sortable({
        connectWith: ".connectedSortable"
      }).disableSelection();
  
  
  $( "#sortable1 li, #sortable2 li" ).disableSelection();
      });
  
  
    // no more than 7 banners allowed 
   $(function() {
  $("#sortable1").sortable({
      connectWith: '.connectedSortable',
      //receive: This event is triggered when a
      //connected sortable list has received an item from another list.
      receive: function(event, ui) {
          // so if &gt; 7
          if ($(this).children().length &gt; 7) {
              //ui.sender: will cancel the change.
              //Useful in the 'receive' callback.
              $(ui.sender).sortable('cancel');
              alert('Your selection has been cancelled. Maximum  7 banners are allowed in the carousel.');
  
          }
      }
      }).disableSelection();
  });
  </code></pre>
  
  <p>html</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;script src="//code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
  &lt;script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;div class="banners_form"&gt;
      &lt;form method="post" action="preview-frame.php"&gt;
          &lt;div class="selectedbanners"&gt;
               &lt;h4&gt; Selected Banners&lt;/h4&gt;
  
              &lt;div class="fixedscroll"&gt;
                  &lt;ul id="sortable1" class="inlinebanners connectedSortable ui-sortable"&gt;
                      &lt;li class="ui-state-default ui-state-enabled bannerslist defaultbanner"&gt;
                          &lt;div class="pic"&gt;&lt;a href="#" class="banner"&gt;&lt;img src="images/banners/slide1389020104.jpg" alt="Market Update"/&gt;&lt;/a&gt;
  
                              &lt;div class="cap"&gt;Banner One&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="availablebanners"&gt;
               &lt;h4&gt;Available Banners&lt;/h4&gt;
  
              &lt;div class="fixedscroll"&gt;
                  &lt;ul id="sortable2" class="inlinebanners connectedSortable ui-sortable"&gt;
                      &lt;li class="ui-state-default ui-state-enabled bannerslist"&gt;
                          &lt;div class="pic"&gt;
                              &lt;input type="hidden" name="banner[]" value="136344"&gt;&lt;a href="#" class="banner"&gt;&lt;img src="images/banners/slide1386152442.jpg" alt="2013 Autumn Statement report"/&gt;&lt;/a&gt;
  
                              &lt;div class="cap"&gt;Banner 2&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;label&gt;Alternative URL:&lt;/label&gt;
                          &lt;input name="url[]" value="" size="44" style="width:100px;margin-top:3px;"&gt;
                          &lt;br&gt;
                      &lt;/li&gt;
                      &lt;li style="" class="ui-state-default ui-state-enabled bannerslist"&gt;
                          &lt;div class="pic"&gt;
                              &lt;input type="hidden" name="banner[]" value="135809"&gt;&lt;a href="" class="banner"&gt;&lt;img src="images/banners/slide1381918638.jpg" alt="View the Autumn 2013 e-Investor"/&gt;&lt;/a&gt;
  
                              &lt;div class="cap"&gt;View the Autumn 2013 e‑Investor&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;label&gt;Alternative URL:&lt;/label&gt;
                          &lt;input name="url[]" value="" size="44" style="width:100px;margin-top:3px;"&gt;
                          &lt;br&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/form&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>