jqueryUI Sortable：处理表单输入上的 .disableSelection()答案

【问题标题】：jqueryUI Sortable: handling .disableSelection() on form inputsjqueryUI Sortable：处理表单输入上的 .disableSelection()
【发布时间】：2011-04-30 22:35:14
【问题描述】：

示例：我有一个包含一堆表单输入的无序列表。

在创建 ul .sortable() 之后，我在 sortable (ul) 上调用 .disableSelection() 以防止在拖动 li 项目时进行文本选择。

..一切都很好，但我需要在表单输入上重新/启用文本选择.. 否则表单基本上是不可编辑的..

我找到了部分解决方案@http://forum.jquery.com/topic/jquery-ui-sortable-disableselection-firefox-issue-with-inputs

enableSelection、disableSelection 似乎仍然没有记录：http://wiki.jqueryui.com/Core

有什么想法吗？

【问题讨论】：

如果您可以发布您的代码，我可能会完成这项工作...您是否查看过可排序的cancel 选项？考虑制作一个解释它的 JSFiddle。 (www.jsfiddle.net)
@福斯科。谢谢。最近有点忙..我刚刚发布了一个解决这个问题的黑客..
作为备注，它不仅影响“输入”，还影响“选择”。

标签： jquery-ui forms jquery-ui-sortable textselection

【解决方案1】：

解决了。有点破解，但有效！ .. 任何 cmets 我怎样才能做得更好？

应用 .sortable() 然后在输入字段上启用文本选择：


$("#list").sortable({
  stop: function () {
    // enable text select on inputs
    $("#list").find("input")
     .bind('mousedown.ui-disableSelection selectstart.ui-disableSelection', function(e) {
      e.stopImmediatePropagation();
    });
  }
}).disableSelection();

// enable text select on inputs
$("#list").find("input")
 .bind('mousedown.ui-disableSelection selectstart.ui-disableSelection', function(e) {
  e.stopImmediatePropagation();
});

【讨论】：

【解决方案2】：

Zack 的帖子的一点改进 - jQuery 插件

$.fn.extend({
    preventDisableSelection: function(){
        return this.each(function(i) {
            $(this).bind('mousedown.ui-disableSelection selectstart.ui-disableSelection', function(e) {
                e.stopImmediatePropagation();
            });
        });
    }
});

完整的解决方案是：

$("#list").sortable({
  stop: function () {
    // enable text select on inputs
    $("#list").find("input").preventDisableSelection();
  }
}).disableSelection();

// enable text select on inputs
$("#list").find("input").preventDisableSelection();

【讨论】：

这适用于任何地方，因为 jQuery 是跨平台的 :) 究竟什么不起作用？
文本输入不可选。

【解决方案3】：

jQuery UI 1.9

$("#list").sortable();
$("#list selector").bind('click.sortable mousedown.sortable',function(e){
    e.stopImmediatePropagation();
});

选择器 = 输入、表格、li....

【讨论】：

听起来不错！这是记录在案的，你有链接吗？还是一个 jsFiddle ？ ..不是我怀疑

【解决方案4】：

我遇到了同样的问题。解决方法很简单：

$("#list").sortable().disableSelection();
$("#list").find("input").enableSelect();

【讨论】：

我没有看到 'enableSelect()' 的 jQuery 文档。如果我错了，请纠正我，但我不相信它存在！
@zack 这可能是一个错字。固定。
正确的名称是 enableSelection()。见api.jqueryui.com/enableSelection

【解决方案5】：

以下内容将禁用对整个文档的选择，但输入和选择元素仍将起作用...

function disableSelection(o) {
  var $o = $(o);
  if ($o.find('input,select').length) {
    $o.children(':not(input,select)').each(function(x,e) {disableSelection(e);});
  } else {
    $o.disableSelection();
  }
}
disableSelection(document);

但请注意 .disableSelection 已被 jquery-ui 弃用，并且有一天会消失。

【讨论】：

【解决方案6】：

简单！做吧：

$( "#sortable_container_id input").click(function() { $(this).focus(); });

并将“sortable_container_id”替换为作为所有“可排序”元素的容器的元素的 id。

【讨论】：

这个问题来自 2010 年。这里的答案不太可能被阅读。

【解决方案7】：

相当古老，但这里有另一种方式：

$('#my-sortable-component').sortable({
    // ...
    // Add all non draggable parts by class name or id, like search input texts and google maps for example
    cancel: '#my-input-text, div.map',
    //...
}).disableSelection();

【讨论】：