20

奇怪的是，这仅在 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>

4

7 回答 7

36

我找到了解决这个问题的另一个“解决方案”。

声明您的可排序时，您应该添加一个 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'是必需的，因为这是默认选项。如果不添加这些，输入字段和按钮也会出现类似问题。

于 2011-05-19T12:34:39.493 回答
7

是的，所以对我来说，这是添加的组合：

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

然后脱掉.disableSelection();

所以我只剩下： 

$("#sortable_list").sortable({
    cancel: 'input,textarea,button,select,option,[contenteditable]'
});
于 2017-02-06T12:21:17.263 回答
5

我遇到了同样的问题，那是因为我disableSelection()一起使用了该功能sortable()

于 2015-04-30T19:34:55.040 回答
3

实际上这是有效的，正如您可以通过按 tab 看到的那样：可编辑元素获得焦点。我认为问题在于可排序插件正在劫持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>
于 2010-06-08T08:46:09.930 回答
3

为所有可编辑内容指定一个类名，然后使用以下命令捕获所有 onmousedown 事件：

$('.classname').each ( function(){
    $(this)[0].onmousedown = function() {
        this.focus();
    };
});
于 2013-02-27T04:06:37.020 回答
1

我有一个类似的问题，但它实际上是由于对元素的“disableSelection”调用而发生的。

于 2016-12-16T08:13:19.063 回答
1

Patrigan 的答案是正确的，但是有一种更好的方法来指定取消，例如：

{cancel: 'input,textarea,button,select,option,[contenteditable]'}
于 2015-10-22T16:17:37.710 回答