Если я сделаю "сортировку jquery" на контент-контенте (-ах), я тогда не буду больше фокусировать мышь где-нибудь внутри контента, пригодного для контента

Странно это нарушается только в Firefox и Opera (IE, Chrome и Safari работают так, как должны).

Любые предложения для быстрого исправления?

<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot; type="text/javascript"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js&quot; type="text/javascript"></script>
  <script>
  $(document).ready(function(){
      $('#sortable').sortable();
  });
  </script>
</head>
<body>
  <span id="sortable">
    <p contenteditable="true">One apple</p>
    <p>Two pears</p>
    <p>Three oranges</p>
  </span>
</body>
</html>

Ответ 1

Я нашел другое "решение" этой проблемы.

При объявлении сортировки вы должны добавить параметр cancel:

<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" type="text/javascript"></script>
  <script>
  $(document).ready(function(){
      $('#sortable').sortable({cancel: ':input,button,.contenteditable'});
  });
  </script>
</head>
<body>
  <span id="sortable">
    <p contenteditable="true" class="contenteditable">One apple</p>
    <p>Two pears</p>
    <p>Three oranges</p>
  </span>
</body>
</html>

Эта версия не заставляет ваш курсор в начале, но вы также не можете перетаскивать его с помощью этого поля. Я бы советовал обернуть <p> в контейнере, у которого есть какой-то перетаскивающий дескриптор (например, точки в начале каждой строки в gmail).

Примечание: ':input,button' требуется, потому что это опция по умолчанию. Если вы не добавите их, вы получите похожие проблемы с полями ввода и кнопками.

Ответ 2

Фактически это работает, как вы можете видеть, нажав вкладку: редактируемый элемент получает фокус. Я думаю, проблема заключается в том, что сортируемый подключаемый модуль захватывает событие mousedown и тем самым предотвращает получение редактируемого элемента при нажатии на него.

Обходным путем является добавление обработчика события mousedown к редактируемому элементу, который обеспечивает получение фокуса:

<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" type="text/javascript"></script>
  <script>
  $(document).ready(function(){
      $('#sortable').sortable();
      $('#editable')[0].onmousedown = function() {
          this.focus();
      };
  });
  </script>
</head>
<body>
  <span id="sortable">
    <p contenteditable="true" id="editable">One apple</p>
    <p>Two pears</p>
    <p>Three oranges</p>
  </span>
</body>
</html>

Ответ 3

укажите имя класса для всего редактируемого контента, затем запишите все события onmousedown, используя это:

$('.classname').each ( function(){
    $(this)[0].onmousedown = function() {
        this.focus();
    };
});

Ответ 4

У меня была та же проблема, и это было потому, что я использовал функцию disableSelection() вместе sortable()

Ответ 5

Ответ Patrigan верен, но есть несколько лучший способ указать отмену, например:

{cancel: 'input,textarea,button,select,option,[contenteditable]'}

Ответ 6

У меня была аналогичная проблема, но на самом деле это произошло из-за вызова "disableSelection" для элемента.

Ответ 7

Да, для меня это была комбинация добавления:

cancel: 'input,textarea,button,select,option,[contenteditable]'

а затем снимая .disableSelection();

поэтому я остался с:

$("#sortable_list").sortable({
    cancel: 'input,textarea,button,select,option,[contenteditable]'
});