jQuery UI Selectable - mouseup не запускается

Question

У меня есть список элементов, для перетаскивания мышью и выбора Я использовал jQuery UI Selectable. Часть выбора работает плавно, но я делегировал события «mousedown» и «mouseup» в список элементов, но событие «mouseup» не запускается, когда я включаю файл jquery-ui.css.

HTML

<div id="favoritelist"> 
    <span>This is favorite list</span> 
    <ol 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> 
    </ol> 
</div> 

JS

$('#favoritelist').on("mouseup", function(){ 
    console.log('in favoritelist mouseup'); 
}); 

$('#favoritelist').on("mousedown", function(){ 
    console.log('in favoritelist mousedown'); 
}); 

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

Я включил следующие файлы:

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 

Событие MouseUp не срабатывает, когда я включаю «jquery- ui.css "fil е. Но когда я удаляю файл «jquery-ui.css», событие mouseup запускается правильно, и выбор также работает так, как ожидалось.

Я смущен, почему событие mouseup не распространяется, когда я включаю файл jquery-ui.css.

JSBIN LINK

Answer 1

Этот вопрос/поведение обсуждалось и здесь на SO и в JQuery forums & issue tracker - это сводится к тому, что есть помощник DIV, который получает инъекции для отображения визуальной «лассо «пользователь увидит, будет ли щелчок и перетаскивание вокруг выбираемых элементов. Этот Lasso DIV находится между мышью & выбираемым элементом и, таким образом, вмешивается в событие mouseup.

Все ссылки ссылочные предлагают два варианта:

1. Используйте дополнительный distanceinitialization parameter на выбираемой виджете, ИЛИ
2. Используйте следующие CSS переопределение: .ui-selectable-helper{pointer-events:none}

Я нахожу, чтобы последние более надежным, хотя первый является технически предпочтительным маршрутом.