CODEWITHSUNDEEP
javascriptjqueryjquery-uiinternet-explorer-10jquery-ui-draggable
user1669496
user1669496

Reputation: 33068

jquery UI Draggable in IE10 bug when dragging by scroll bar

I've got a div with a draggable element which works great in all browsers, except in IE10, there is an issue where if you attempt to drag the element by the scrollbar, it will scroll, until you mouseup, in which case the element will snap to the current position of your mouse.

I've setup this fiddle: http://jsfiddle.net/Hhja4/1/

If you are using IE10, just click and hold on the scroll bar and then let go. The div will then follow your mouse around even though you don't currently have the mousedown, and as far as I can tell, the only way to make it stop is to right click.

Because of this, I've tried adding a trigger to the draggable element for a right mouse click, but it's not working..

$('#draggable').draggable().on('mouseup', function() {
    $('#draggable').trigger({type: 'mousedown', which: 3});
});

It would seem as though the mouseup event isn't being fired though when the mouse is coming up off a click on the scrollbar, so this seems to be a bug with IE10 so I tried using the scroll event...

$('#draggable').scroll(function() {
    $('#draggable').trigger({type: 'mousedown', which: 3});
});

Unfortunately, I've found that even the scroll event isn't going to fire until the right mouse button is clicked.

Is there a workaround for this problem?

Upvotes: 6

Views: 3461

Answers (2)

John Maloney
John Maloney

Reputation: 1166

In case someone comes here and is unsure exactly where to add the ".draggy" class that is discussed in the answer here is an example of non-working html and then the addition of the css class that fixes it:

Original and Broken:

<div class="modal-dialog ui-widget-content">
<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-bind="click: closeWindow" aria-hidden="true"></button>
        <h4><span data-bind="text: title"></span></h4>
    </div>

    <div class="modal-body dataGridBody">
        <div id="dataGridPanel" class="portlet box xs">
            <table id="table" class="standard-grid" data-bind="attr: { 'gridId': id }"></table>
        </div>
    </div>
</div>

Original and Broken Javascript:

$('.modal-dialog').draggable();

Correct Html (notice the placement of the css class name "draggableSection", this is important to getting the scrollbar issue to go away):

<div class="modal-dialog ui-widget-content">
<div class="modal-content">
    <div class="modal-header draggableSection">
        <button type="button" class="close" data-bind="click: closeWindow" aria-hidden="true"></button>
        <h4><span data-bind="text: title"></span></h4>
    </div>

    <div class="modal-body dataGridBody">
        <div id="dataGridPanel" class="portlet box xs">
            <table id="table" class="standard-grid" data-bind="attr: { 'gridId': id }"></table>
        </div>
    </div>
</div>

Correct Javascript

$('.modal-dialog').draggable({handle: '.draggableSection'});

Upvotes: 5

user1669496
user1669496

Reputation: 33068

I found the solution just in case anyone else comes across this problem.

The answer was to add a class to each element within the div that I wish to be able to use to drag. I used the class draggy.

Then you can use that class as a selector as the handle option.

$(document).ready(function() {
    $('#content\\:pnlPopEmail').draggable({handle: '.draggy'});
});

This isn't explained in the jQuery UI docs, as it says handle can accept only elements that are descendents of the draggable element, but apparently it can also accept selectors as well.

Upvotes: 5

Related Questions