Jquery Draggable UI overrides normal browser behavior for HTML elements inside draggable-enabled div

Question

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

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

How do I prevent the draggable ui to override the normal browser behavior for HTML elements?

Nick Craver · Accepted Answer · 2010-07-12 11:12:14Z

2

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.

answered Jul 12, 2010 at 11:12

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Roki · Accepted Answer · 2010-07-12 11:11:31Z

0

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

answered Jul 12, 2010 at 11:11

Roki

2,6881 gold badge22 silver badges21 bronze badges

Collectives™ on Stack Overflow

Jquery Draggable UI overrides normal browser behavior for HTML elements inside draggable-enabled div

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related