javascript - 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)" 作为 #sortable1 和 #sortable2 的 sortable 方法的选项 帮我修好了