Javascript “如果我这样做”；jquerysortable"；在内容可编辑项上，我可以'；不要再将鼠标焦点放在内容可编辑文本中的任何位置_Javascript_Jquery_Jquery Ui Sortable_Contenteditable

Javascript “如果我这样做”；jquerysortable"；在内容可编辑项上，我可以'；不要再将鼠标焦点放在内容可编辑文本中的任何位置

javascript jquery

Javascript “如果我这样做”；jquerysortable"；在内容可编辑项上，我可以'；不要再将鼠标焦点放在内容可编辑文本中的任何位置,javascript,jquery,jquery-ui-sortable,contenteditable,Javascript,Jquery,Jquery Ui Sortable,Contenteditable,奇怪的是，只有Firefox和Opera（即Chrome和Safari）才打破了这一点有什么快速修复的建议吗 $（文档）.ready（函数（）{ $（“#可排序”）.sortable（）； }); 一个苹果两个梨三个桔子实际上，这是可行的，您可以通过按tab键看到：可编辑元素接收焦点。我认为问题在于可排序插件正在劫持mousedown事件，从而阻止可编辑元素在单击它时接收焦点解决方法是向可编辑元素添加一个mousedown事件处理程序，以确保它接收焦点： <html> &

奇怪的是，只有Firefox和Opera（即Chrome和Safari）才打破了这一点

有什么快速修复的建议吗


$（文档）.ready（函数（）{
$（“#可排序”）.sortable（）；
});
一个苹果
两个梨
三个桔子

实际上，这是可行的，您可以通过按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>


$（文档）.ready（函数（）{
$（“#可排序”）.sortable（）；
$（'#可编辑'）[0].onmousedown=function（）{
这是focus（）；
};
});
一个苹果
两个梨
三个桔子

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

声明可排序时，应添加一个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>


$（文档）.ready（函数（）{
$（'#sortable'）.sortable（{cancel:':input，button，.contenteditable'}）；
});
一个苹果
两个梨
三个桔子

此版本不会在开始时强制光标，但也不能使用此字段进行拖动。我建议将

包装在一个具有某种拖动手柄的容器中（比如gmail中每行开头的点）

旁注：

”：需要输入按钮“

，因为这是默认选项。如果不添加这些，输入字段和按钮也会出现类似问题。

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

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

我遇到了同样的问题，这是因为我同时使用了函数

disableSelection（）

sortable（）

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

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

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

是的，因此对我来说，这是添加以下内容的组合：

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

然后取下

.disableSelection（）
所以我只剩下：
$("#sortable_list").sortable({
    cancel: 'input,textarea,button,select,option,[contenteditable]'
});

谢谢蒂姆！contenteditable元素现在接收焦点，但我仍然无法通过在“一个苹果”文本中的任何位置单击鼠标来更改焦点。我猜focus（）触发器总是将光标放在contenteditable元素文本的开头。这一点很好。除了修改可排序的插件代码之外，我正在努力想一个解决这个问题的好方法

只想添加它，而不是执行

$（'#sortable'）.sortable（{cancel:':input，button，.contenteditable'）

，您可以执行

$（'#sortable'）.sortable（{cancel:':input，button，[contenteditable]}）。那么您根本不需要将.contenteditable类添加到元素中。谢谢您，这是一个很大的帮助。是的！既然所有的jQueryUI教程都告诉你要使用它，你为什么不呢？直到它导致这些类型的问题：-）嗨，在我的情况下，文本是选择和焦点，但不能更改，但没有选择文本，我可以添加和删除文本！谢谢你。我相信删除“禁用选择”会起到作用。事实证明，您不应该使用它（尽管它出现在jQueryUI可排序的演示代码中）。
$("#sortable_list").sortable({
    cancel: 'input,textarea,button,select,option,[contenteditable]'
});