Jquery Draggable Ui Overrides Normal Browser Behavior For Html Elements Inside Draggable-enabled Div

I have a jquery ui draggable div, and the HTML contents do not behave normally because of the draggable.

This text

Solution 1:

You can disable dragging from the inner <div> like this:

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

event.stopPrpagation() stops a click on that inner <div> from bubbling up to the outer <div> that has the drag events bound to it. Since the event will never get there, those drag event handlers won't interfere. You can run this code before or after creating the draggable, it'll work either way.

Solution 2:

Try add your div unselectable attribute=off:

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

and css:

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

I'm not tested in jQuerry.UI, but this is my workaround in extJs and Dojo...

Share