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 scro

Solution 1:

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">
<divclass="modal-content"><divclass="modal-header"><buttontype="button"class="close"data-bind="click: closeWindow"aria-hidden="true"></button><h4><spandata-bind="text: title"></span></h4></div><divclass="modal-body dataGridBody"><divid="dataGridPanel"class="portlet box xs"><tableid="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">
<divclass="modal-content"><divclass="modal-header draggableSection"><buttontype="button"class="close"data-bind="click: closeWindow"aria-hidden="true"></button><h4><spandata-bind="text: title"></span></h4></div><divclass="modal-body dataGridBody"><divid="dataGridPanel"class="portlet box xs"><tableid="table"class="standard-grid"data-bind="attr: { 'gridId': id }"></table></div></div></div>

Correct Javascript

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

Solution 2:

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.