How to enable dblclick event on elements which was binded with JQuery UI Selectable plugin?

Question

In my case,I have an UL with JQuery UI Selectable plugin applied,but at the same time ,I want the item witch was binded with selectable plugin was doing something when I double click this item.But it seems that the JQuery UI Selectable plugin had block the dblclick event. So,how can I make it work?

E.g:

<script>
    $(function() {
        $( "#selectable" ).selectable();

                $( "#selectable" ).dblclick(function(){
                    // do something here
                })
    });
    </script>

<ul id="selectable">
    <li class="ui-widget-content">Item 1</li>
    <li class="ui-widget-content">Item 2</li>
    <li class="ui-widget-content">Item 3</li>
    <li class="ui-widget-content">Item 4</li>
    <li class="ui-widget-content">Item 5</li>
    <li class="ui-widget-content">Item 6</li>
    <li class="ui-widget-content">Item 7</li>
</ul>

Thank you very much!!

Australopithecus

You're never going to be able to make a page work well when elements are trying to handle both single- and double-click. The code will be too complicated, browsers don't cooperate, and users will absolutely hate it. – Zomba

Answer 1

In jQuery you can link events, like this:

$( "#selectable" ).selectable().dblclick();

Bit I'm not sure this will work, because both events are click events.

Twenty

This is not "linking events". It's just calling two functions, one after the other. It's called "chaining" and has nothing to do with events. – Kerosene

Answer 2

If you add .ui-selected to cancel options passed into selectable method then you can double click b/c it will not raise selecting event on .ui-selected items.

$('#selectable').selectable({ 
  cancel: '.ui-selected' 
});

Although, this does take away the ability to deselect a selected item. You could do the following to manually deselect

$('.ui-selected').on('click', function() {
  $(this)
    .removeClass('ui-selected')
    .parents('.ui-selectable')
    .trigger('selectablestop');

  // you might also want to trigger selectablestop.
});

Hancock

I believe now with 1.7, the on() method for binding events should be used for the .ui-selected click, so that they can be made "delegated" which means that as elements gain and lose the .ui-selected class, they automatically gain and lose the event handler. That would look like: $('#selectable').on('click', '.ui-selected', function() { ... – Negligee

Updated the answer using .on method. Thanks Michael – Hancock

Answer 3

You just need to set the distance to a number > 0 to register clicks and double-clicks.

$("#selectable").selectable({
    distance: 1
});

See http://forum.jquery.com/topic/selectable-dosn-t-fire-click-event

Misspend

This was a neat way of doing it but stops the mouse click selection – Missal

yeah i just discovered the same issue :( – Mariannemariano

Answer 4

$("#selectable li").mousedown(function(event) {
    if(event.which==1)
    {
        if($(event.currentTarget).data('oneclck')==1)
        {
            alert('click');

            return false;
        }
        else
        {
            $(this).data('oneclck', 1);
            setTimeout(function(){
                $(event.currentTarget).data('oneclck', 0);
            }, 200);
        }
    }
});

Warhol

This is not valid code. You must save event.currentTarget in local variable for it work fine. Plz fix it. You answer is most valid. – Paperhanger

Answer 5

This is because onmousedown triggers selection event (the dotted div that selects multiple selectable elements.) I had the same problem and i fixed it by adding a few lines of the code to the JQUERY UI library. What you have to do is to delay selection event by starting it after the mouse moves a few pixels. This allows you to double click element and still have the selection that is user friendly! :D

This is the part of the code that delays the selection and solves your problem:

<script>
    var content = $('#content').selectable();

    var _mouseStart = content.data('selectable')['_mouseStart'];

    content.data('selectable')['_mouseStart'] = function(e) {
        _mouseStart.call(this, e);
        this.helper.css({
            "top": -1,
            "left": -1
        });
    };
</script>

I found this workaround in this post

Appanage

Answer 6

I use this and I think it's the best solution.

$("ul").selectable({
    filter: "li"
});

$("ul").on("mousedown","li",function(e){
    var n = ($(e.toElement).is(".ui-selected")) ? 1 : 0;
    $("#filelist").selectable( "option", "distance", n );
});

When the user starts a click on a selected elements I set the distance to one so that the doesn't blocks the double click event, but I available if the user really starts selecting.

Hurryscurry