jqueryUI Sortable: handling .disableSelection() on form inputs

Question

example: i have an un-ordered list containing a bunch of form inputs.

after making the ul .sortable(), I call .disableSelection() on the sortable (ul) to prevent text-selection when dragging an li item.

..all fine but I need to re/enable text-selection on the form inputs.. or the form is basically un-editable ..

i found a partial solution @ http://forum.jquery.com/topic/jquery-ui-sortable-disableselection-firefox-issue-with-inputs

• enableSelection, disableSelection seem still to be un-documented: http://wiki.jqueryui.com/Core

any thoughts?

Appertain

If you could post your code, I could probably make this work... have you looked at the cancel option of sortable? Consider making a JSFiddle that explains it. (www.jsfiddle.net) – Labaw

@ Fosco. thks. been a bit busy lately.. i just posted a hack that solves this .. – Appertain

As a remark, it not only affects 'inputs' but 'selects' too. – Niue

Answer 1

solved . bit of hack but works! .. any comments how i can do this better?

apply .sortable() and then enable text-selection on input fields :

$("#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();
});

Appertain

Answer 2

A little improvement from post of Zack - jQuery Plugin

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

And full solution is:

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

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

Ontario

This works everywhere since jQuery is crossplatform :) What exactly doesn't works? – Ontario

Text input is not selectable. – Burglary

Answer 3

jQuery UI 1.9

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

selector = input, table, li....

Hindbrain

sounds great! is this documented, do you have a link? or a jsFiddle ? ..not that I'm skeptical – Appertain

Answer 4

I had the same problem. Solution is quite simple:

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

Theodoratheodore

I dont see jQuery docs for 'enableSelect()'.. Please correct me if I'm wrong, but I dont believe it exists! – Appertain

@Appertain it was probably a typo. Fixed. – Obi

The correct name is enableSelection(). See api.jqueryui.com/enableSelection – Showiness

Answer 5

The following will disable selection for the entire document, but input and select elements will still be functional...

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

But note that .disableSelection has been deprecated by jquery-ui and will someday go away.

Ammieammine

Answer 6

EASY! just do:

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

and replace "sortable_container_id" with the id of the element that is the container of all "sortable" elements.

Goldarn

This question is from 2010. Answers here are very unlikely to be read. – Synergistic

Answer 7

Quite old, but here is another way:

$('#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();

Renferd