Как включить событие dblclick для элементов, которые были связаны с плагином JQuery UI Selectable?

Question

В моем случае, у меня есть UL с подключенным плагином JQuery UI Selectable, но в то же время я хочу, чтобы элемент, с которым связывался selectable plugin, делал что-то, когда я double click делал этот элемент. Но кажется, что JQuery UI Selectable plugin had block the dblclick event. Итак, как я могу заставить его работать?

например:

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

Большое спасибо !!

Answer 1

Если вы добавляете .ui-selected для отмены опций, переданных в выбираемый метод, то вы можете дважды щелкнуть b / c, это не вызовет событие выбора для .ui-selected элементов.

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

Хотя это лишает возможности отмены выбора выбранного элемента. Вы можете сделать следующее, чтобы вручную отменить выбор

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

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

Answer 2

Вам просто нужно установить расстояние до числа> 0, чтобы регистрировать щелчки и двойные щелчки.

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

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

Answer 3

$("#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 4

Я использую это, и я думаю, что это лучшее решение.

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

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

Когда пользователь начинает щелкать по выбранным элементам, я устанавливаю distance на единицу, чтобы не блокировать двойноесобытие клика, но я доступен, если пользователь действительно начинает выбирать.

Answer 5

Это потому, что onmousedown вызывает событие выбора (пунктирный div, который выбирает несколько выбираемых элементов.) У меня была та же проблема, и я исправил ее, добавив несколько строк кода в библиотеку пользовательского интерфейса JQUERY.Вам нужно отложить событие выделения, запустив его после того, как мышь переместится на несколько пикселей.Это позволяет вам дважды щелкнуть элемент и при этом иметь выбор, который удобен для пользователя!: D

Это часть кода, которая задерживает выбор и решает вашу проблему:

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

Я нашел этот обходной путь в этой публикации

Answer 6

В jQuery вы можете связать события, например:

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

Бит Я не уверен, что это будет работать, потому что оба события являются событиями щелчка.