Question

更新，因为我找到了我发布的解决方案作为我自己的问题的答案：需要删除disableSelection（）方法。如果有人遇到同样的问题，请在此处提供原始帖子以供参考：

:::::::::::::::::::

我正在使用 JQuery UI Sortable 方法，我发现了 Firefox 和输入字段的奇怪错误。出于某种原因，添加到可排序元素的输入字段在Firefox中无法单击。除非右键单击它们，否则无法关注它们。 Chrome中不存在此问题。

请参阅JS Fiddle，并注意如果您在Firefox中查看它只是一个问题。为了记录我在Firefox 33上，我也在Firefox 32上重现了这个：

http://jsfiddle.net/t1795601/

以下是小提琴的代码。它几乎完全匹配JQuery UI用于演示的内容，但添加的输入字段除外，用于演示此问题：

库：

 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

我的HTML：

<h4>An input outside of the sortable boxes works:</h4>
<input type="text" placeholder="this input works"/>
<br/>

<h4>But if you try to add an input field inside one of the sortable boxes, you cannot click it in Firefox.</h4>
<h6>Note that the markup for the sortable boxes is copied directly from jquery.com as is the corresponding CSS and JS</h6>
   <div class="sortable-lists">
    <ul id="sortable1" class="connectedSortable">
        <li class="ui-state-default">Item 1</li>
        <li class="ui-state-default">Item 2</li>
        <li class="ui-state-default">Item 3</li>
        <li class="ui-state-default">Item 4</li>
        <li class="ui-state-default">Item 5</li>
    </ul>
    <ul id="sortable2" class="connectedSortable">
    <li class="ui-state-highlight"><input type="text" placeholder="this input does not"/></li>
    <li class="ui-state-highlight">Item 2</li>
    <li class="ui-state-highlight">Item 3</li>
    <li class="ui-state-highlight">Item 4</li>
    <li class="ui-state-highlight">Item 5</li>
    </ul>
</div>

我的CSS：

 #sortable1, #sortable2 {
border: 1px solid #eee;
width: 40%;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
float: left;
margin-right: 10px;
}
#sortable1 li, #sortable2 li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 90%;
cursor:pointer;
}

我的JS：

 $(function() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});

Answer 1

在我发现问题时，回答了我自己的问题。它是.disableSelection（）方法。一旦删除它，输入框在Firefox中工作。

Answer 2

删除.disableSelection（）;从你JS，它将使输入工作在Firefox中。有完全相同的问题。

您更新的JS应如下所示： $（function（）{ $（＆＃34;＃sortable1，＃sortable2＆＃34;）.sortable（{connectWith：＆＃34; .connectedSortable＆＃34;}）; }）;

JQuery UI可排序元素和输入字段在Firefox中不起作用

2 个答案: