更新是因为我找到了解决方案,我将其作为我自己问题的答案发布:需要删除disableSelection() 方法。如果有人遇到同样的问题,请引用此处的原始帖子:
:::::::::::::::::::
我正在使用 JQuery UI Sortable 方法,并且发现 Firefox 和输入字段存在一个奇怪的错误。由于某些原因,添加到可排序元素的输入字段在 Firefox 中不可单击。除非右键单击它们,否则您无法聚焦它们。 Chrome 中不存在此问题。
请参阅此处的 JS Fiddle,并注意这仅在您在 Firefox 中查看时才会出现问题。根据记录,我使用的是 Firefox 33,并且我也在 Firefox 32 上重现了此内容:
这是 fiddle 中的代码。它几乎与 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();
});
最佳答案
在我弄清楚问题后发布我自己问题的答案。这是 .disableSelection() 方法。一旦删除,输入框就可以在 Firefox 中使用。
关于JQuery UI 可排序元素和输入字段在 Firefox 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26395197/