Question

我正在使用Jquery 2.1.3和Jquery UI 1.11.4。 draggable附加到具有可滚动内容的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有一个＆＃39;句柄＆＃39;您可以将类/ ID传递给的属性，然后只有该指定的部分才会响应拖动。您希望可拖动部分与任何具有溢出的元素分开b / c IE是IE并且无法处理。该元素的标题部分适用于此。

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

此外，在控制器中使用jQuery并不是一个好习惯，只是抬头。

带滚动条的JQuery UI Draggable Div鼠标

1 个答案: