如果我对一个可疑项目进行"jquery sortable",那么我就无法将鼠标聚焦在任何可疑文本中的任何地方了

Question

如果我对一个可疑项目进行"jquery sortable",那么我就无法将鼠标聚焦在任何可疑文本中的任何地方了

Mat*_*tej 18 javascript jquery contenteditable jquery-ui-sortable

奇怪的是,这只在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>

Answer 1

小智 36

我找到了解决这个问题的另一个"解决方案".

在声明可排序时,您应该添加一个取消:选项,如下所示:

<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>

Run Code Online (Sandbox Code Playgroud)

此版本不会在开始时强制使用光标,但也无法使用此字段进行拖动.我建议将其包装<p>在一个容器中,该容器具有某种拖动句柄(就像gmail中每行开头的点).

旁注:':input,button'是必需的,因为这是默认选项.如果不添加这些,则输入字段和按钮会出现类似问题.

只想添加而不是做`$('#sortable').sortable({cancel:':input,button,.contenteditable'});`,你可以做`$('#sortable').sortable( {cancel:':input,button,[contenteditable]'});`.然后,您根本不需要将.contenteditable类添加到元素中. (12认同)

Answer 2

小智 6

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

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

Run Code Online (Sandbox Code Playgroud)

然后取下 .disableSelection();

所以我只剩下：

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

Run Code Online (Sandbox Code Playgroud)

Answer 3

小智 5

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

Answer 4

Tim*_*own 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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	15 年，3 月前
查看次数：	9203 次
最近记录：	8 年，7 月前