jqueryUI Sortable:在表单输入上处理.disableSelection()

时间:2010-10-26 19:15:22

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

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

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

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

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

任何想法?

7 个答案:

答案 0 :(得分:21)

解决了。有点黑客但有效! ..任何评论我怎么能做得更好?

应用.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();
});

答案 1 :(得分:4)

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();

答案 2 :(得分:3)

jQuery UI 1.9

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

选择器 = input,table,li ....

答案 3 :(得分:0)

我遇到了同样的问题。解决方案非常简单:

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

答案 4 :(得分:0)

以下将禁用整个文档的选择,但输入和选择元素仍然可以正常运行...

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弃用,并且有一天会消失。

答案 5 :(得分:0)

EASY!只是做:

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

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

答案 6 :(得分:0)

很老,但这是另一种方式:

handleError