Jquery Draggable UI переопределяет нормальное поведение браузера для элементов HTML внутри div с поддержкой draggable

Question

У меня есть перетаскиваемый div jquery ui, и содержимое HTML не работает нормально из-за перетаскивания.

<div id="popup"> <!-- this popup is draggable -->
    This text is not selectable. When I try to select it, the popup div is dragged.
    <div style="overflow:auto; height:50px">
         Lots of text here, vertical scrollbar appears. But clicking the scrollbars don't work (doesn't scroll the content). Each click (mousedown-mouseup) is considered "dragging".
    </div>
</div>

Как запретить перетаскиваемому пользовательскому интерфейсу переопределять обычное поведение браузера для элементов HTML?

Answer 1

Вы можете отключить перетаскивание из внутреннего <div> следующим образом:

$("#popup div").bind('mousedown mouseup', function(e) {
  e.stopPropagation();
});

event.stopPrpagation() останавливает щелчок по этому внутреннему <div> из всплывающего к внешнему <div>, к которому привязаны события перетаскивания.Поскольку событие никогда не будет достигнуто, эти обработчики событий перетаскивания не будут вмешиваться.Вы можете запустить этот код до или после создания draggable, он будет работать в любом случае.

Answer 2

Попробуйте добавить свой атрибут unselectable div = off:

<div id="popup" unselectable="off">
...

и css:

[unselectable=off] { 
    -moz-user-select                    : all; 
    -khtml-user-select                  : all; 
    user-select                     : all; 
}

Я не тестировался в jQuerry.UI, но это мой обходной путь в extJs и Dojo ...