JQuery UI 可拖动 Div 带有滚动条到鼠标

Question

我正在使用 Jquery 2.1.3 和 Jquery UI 1.11.4。可拖动对象附加到具有可滚动内容的 div。单击滚动条后，可拖动手柄会粘在上面。现在没有办法退出拖动模式。只有 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();
    }
});

Answer 1

可能与这个问题相同：jquery UI Draggable in IE10 bug when dragging by scroll bar

.draggable 有一个 'handle' 属性，您可以将 class/id 传递给它，然后只有指定的部分会响应拖动。您会希望可拖动部分与任何溢出的元素分开 b/c IE 是 IE，无法处理。元素的 header 部分适用于此。

$('#floatingdiv').draggable({handle: '.draggableSection'});

此外，在控制器中使用 jQuery 并不是好的做法，请注意。

JQuery UI 可拖动 Div 带有滚动条到鼠标

JQuery UI Draggable Div with scroll sticks to mouse

javascript

jquery

internet-explorer

jquery-ui