JQuery UI可拖动潜水与滚动棒到鼠标

JQuery UI Draggable Div with scroll sticks to mouse

本文关键字：滚动 鼠标 潜水 UI 拖动 JQuery      更新时间：2023-09-26

我使用的是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();
    }
});

可能与此问题相同：当通过滚动条拖动时，IE10中的jquery UI可拖动错误

.draggable有一个"handle"属性，您可以将类/id传递给该属性，然后只有指定的节才会响应拖动。您将希望可拖动部分与任何有溢出b/c的元素分离。IE是IE，无法处理它。元素的标题部分对此效果良好。

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

此外，在控制器中使用jQuery并不是一种好的做法，只是一种提醒。

相关文章：