jQuery sortable cannot click into input

Question

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.

to be clear i am not able to click into the input field and type anything

anyone know how this can be fixed?

My code is below or view a jsFiddle

js:

     $(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 > 7
        if ($(this).children().length > 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();
});

html

<div class="container">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<div class="banners_form">
    <form method="post" action="preview-frame.php">
        <div class="selectedbanners">
             <h4> Selected Banners</h4>

            <div class="fixedscroll">
                <ul id="sortable1" class="inlinebanners connectedSortable ui-sortable">
                    <li class="ui-state-default ui-state-enabled bannerslist defaultbanner">
                        <div class="pic"><a href="#" class="banner"><img src="images/banners/slide1389020104.jpg" alt="Market Update"/></a>

                            <div class="cap">Banner One</div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="availablebanners">
             <h4>Available Banners</h4>

            <div class="fixedscroll">
                <ul id="sortable2" class="inlinebanners connectedSortable ui-sortable">
                    <li class="ui-state-default ui-state-enabled bannerslist">
                        <div class="pic">
                            <input type="hidden" name="banner[]" value="136344"><a href="#" class="banner"><img src="images/banners/slide1386152442.jpg" alt="2013 Autumn Statement report"/></a>

                            <div class="cap">Banner 2</div>
                        </div>
                        <label>Alternative URL:</label>
                        <input name="url[]" value="" size="44" style="width:100px;margin-top:3px;">
                        <br>
                    </li>
                    <li style="" class="ui-state-default ui-state-enabled bannerslist">
                        <div class="pic">
                            <input type="hidden" name="banner[]" value="135809"><a href="" class="banner"><img src="images/banners/slide1381918638.jpg" alt="View the Autumn 2013 e-Investor"/></a>

                            <div class="cap">View the Autumn 2013 e‑Investor</div>
                        </div>
                        <label>Alternative URL:</label>
                        <input name="url[]" value="" size="44" style="width:100px;margin-top:3px;">
                        <br>
                    </li>
                </ul>
            </div>
        </div>
    </form>
 </div>
</div>

Answer 1

Adding handle: ":not(input)" as an option to the sortable method for #sortable1 and #sortable2 fixed it for me

Answer 2

Do not use disableSelection().
For example, instead of: $( "#sortable1, #sortable2" ).sortable({ connectWith: ".connectedSortable" }).disableSelection(); Write: $( "#sortable1, #sortable2" ).sortable({ connectWith: ".connectedSortable" });