Menu
I am using Jquery 2.1.3 and Jquery UI 1.11.4. The draggable is attached to a div with scrollable content. Once you click on the scrollbar, the draggable handle sticks to it. There is no way to get out of the drag mode now. This happens only is IE.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="TodoCtrl">
<button ng-click="foo()">Load Div</button>
<div id="floatingdiv" style="display:none;overflow-x:scroll;width:300px;height:400px;">
<div style="width:1000px;height:1000px;border:1px solid black;">MY INNER DIV</div>
</div>
</div>
</div>
</body>
</html>
Javascript
var myAppModule = angular.module('myApp', []);
myAppModule.controller("TodoCtrl",function($scope) {
$scope.foo = function()
{
$("#floatingdiv").show();
$("#floatingdiv").draggable();
}
});
471
Might be same as this question: jquery UI Draggable in IE10 bug when dragging by scroll bar
.draggable has a 'handle' property that you can pass a class/id to and then only that specified section will respond to dragging. You'll want the draggable section to be separate from any element that has an overflow b/c IE is IE and can't handle that. A header section for the element works well for this.
$('#floatingdiv').draggable({handle: '.draggableSection'});
Also, it's not good practice to have jQuery in a controller, just a heads up.
53
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
