Обновление, потому что я нашел решение этого вопроса, которое я разместил в качестве ответа на свой вопрос: метод disableSelection() необходимо удалить. Оригинальный пост здесь для справки в случае, если кто сталкивается с таким же вопросом:JQuery UI Sortable Elements и поля ввода, которые не работают в Firefox
:::::::::::::::::::
Я использую метод JQuery UI Сортируемого и я нашел странную ошибку с Firefox и поля ввода. По некоторым причинам поля ввода, добавляемые к сортируемым элементам, не могут быть активированы в Firefox. Вы не можете сосредоточиться на них, если вы не щелкните их правой кнопкой мыши. Эта проблема отсутствует в Chrome.
См. Здесь JS Fiddle и обратите внимание, что это проблема только в том случае, если вы просматриваете его в Firefox. Для записи я на Firefox 33 и я также воспроизвел на Firefox 32:
Вот код из скрипки. Это почти точно соответствует тому, что использует 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();
});