Drag and Scroll bug in IE 11

[rwtz]

Hello,

I found a bug about drag and scrolling in IE 11.

There are some widgets and one of them has long contents, so it has a scroll bar in the widget. The bug I found is, In IE 11, if I click the scroll bar, drag event starts. So when you click the scroll bar, you can move widget without dragging! It is not what I wanted. I tested in Chrome and IE but in Chrome, it works well. How can I fix this bug?

The below is the code I tested.

(HTML)

<div class="container">
    <div class="gridster">
        <ul>
            <li data-row="1" data-col="1" data-sizex="2" data-sizey="2" style="overflow:auto">
                <table>
                    <thead>
                        <tr>
                            <th name="data1">data1</th>
                            <th name="data2">data2</th>
                            <th name="value1">value1</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>a</td>
                            <td>1420156799000</td>
                            <td>10</td>
                        </tr>
                        <tr>
                            <td>a</td>
                            <td>1420156799000</td>
                            <td>10</td>
                        </tr>
                        <tr>
                            <td>a</td>
                            <td>1420156799000</td>
                            <td>10</td>
                        </tr>
                        <tr>
                            <td>a</td>
                            <td>1420156799000</td>
                            <td>10</td>
                        </tr>
                        <tr>
                            <td>a</td>
                            <td>1420156799000</td>
                            <td>10</td>
                        </tr>
                        <tr>
                            <td>a</td>
                            <td>1420156799000</td>
                            <td>10</td>
                        </tr>
                        <tr>
                            <td>a</td>
                            <td>1420156799000</td>
                            <td>10</td>
                        </tr>
                        </tbody></table></li>
            <li data-row="1" data-col="3" data-sizex="1" data-sizey="2">1</li>
            <li data-row="1" data-col="4" data-sizex="1" data-sizey="1">2</li>
            <li data-row="3" data-col="2" data-sizex="3" data-sizey="1">3</li>
            <li data-row="4" data-col="1" data-sizex="1" data-sizey="1">4</li>
            <li data-row="3" data-col="1" data-sizex="1" data-sizey="1">5</li>
        </ul>
    </div>
</div>

(JavaScript)

var gridster = $(".gridster ul").gridster({
    widget_base_dimensions: [100, 55],
    widget_margins: [5, 5],
    draggable: {
        start: function (e, ui, $widget) {

        },
        stop: function (e, ui, $widget) {

        }
    }
}).data('gridster');