jQuery sortable无法点击进入输入

Question

您好我使用带有两个链接列表的jquery sortable，我在此列表中有输入字段，有时需要附加自定义URL。但由于某种原因，可排序函数禁用输入字段。

要清楚我无法点击输入字段并输入任何内容

任何人都知道如何解决这个问题？

我的代码位于下方或查看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

添加handle: ":not(input)"作为sortable #sortable1方法的选项#sortable2和{{1}}为我修复了

Answer 2

请勿使用 disableSelection（） 例如，而不是： $( "#sortable1, #sortable2" ).sortable({ connectWith: ".connectedSortable" }).disableSelection(); 写： $( "#sortable1, #sortable2" ).sortable({ connectWith: ".connectedSortable" });