Как я могу заставить jQuery UI «отпустить» перетаскиваемый или сортируемый элемент, когда кнопка мыши будет выпущена на боковой панели или панели разработчиков в Firefox?

Question

Я работаю над веб-приложением, которое позволяет пользователям изменять порядок и удалять элементы на экране с помощью виджета jQuery для сортировки и сортировки. Первоначально я предоставил только один способ удалить элемент: перетащите его в область с иконкой корзины и отбросьте ее. Теперь я добавляю параметр для удаления элемента, перетаскивая его с края экрана и отпуская кнопку мыши.

Эта новая функция (удаление путем перетаскивания на экран) была немного сложнее настроить, чем я ожидал, но в итоге у меня получилось большинство изломов. Одна вещь по-прежнему превзошла меня: в Firefox есть проблема с функцией перетаскивания, когда в браузере присутствуют другие «панели», кроме основного окна браузера - например, боковая панель закладок (которую я обычно держу встык слева) и инструменты разработчика (которые я обычно держу вправо или снизу). Если я подберу сортируемый элемент, перетащите его за одну из этих панелей и отпустите кнопку мыши, пользовательский интерфейс jQuery продолжает «удерживать» элемент (т. Е. Продолжает перетаскивать).

Как воспроизвести проблему:

1. Перейти к jQuery UI Sortable странице.
2. Нажмите [control-B], чтобы отобразить боковую панель закладок Firefox.
3. Возьмите один из отсортированных элементов, перетащите его по боковой панели закладок и отпустите кнопку мыши.
4. Переместите мышь обратно в поле, из которого был отправлен предмет. Вы увидите, что элемент все еще прилипает к мыши, как будто его тянут, даже если вы больше не удерживаете кнопку мыши.

Желаемая поведение: Я хочу Сортируемый виджет, чтобы освободить Сортируемый элемент, так же, как это происходит при перемещении указателя полностью вне браузера и отпустите кнопку мыши.

Обратите внимание, что эта проблема относится к Firefox. (Я использую Firefox 51.0.1.) У Google Chrome нет такой же проблемы. (Когда я устанавливаю инструменты разработчика в Google Chrome снизу или вправо, я могу освободить отсортированные элементы в области dev-tools и получить желаемое поведение.) Я не тестировал в IE, Safari или других браузеров.

Заранее благодарим за вашу помощь!

Answer 1

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

Вот решение для перетаскиваемым:

var flag=true; 
start: function(event, ui){ 
    if(flag){ 
     flag = false; 
     $('body').one("mouseleave", function(){ 
      $('body').one("mouseup", function(){ 
       flag = true; //event occured, rebind 
       //do your stuff 
       }); 
      }); 
    } 
    else{ 
     flag = false; 
    } 
} 

Вот ссылка на question