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

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.

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

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

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

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

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.