gpt4 book ai didi

javascript - JQuery UI Draggable Div 带有滚动条到鼠标

转载 作者:行者123 更新时间:2023-11-29 10:40:54 25 4
gpt4 key购买 nike

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

最佳答案

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

.draggable 有一个“handle”属性,您可以将类/id 传递给该属性,然后只有指定的部分才会响应拖动。您将希望可拖动部分与任何具有溢出 b/c IE 的元素分开,IE 无法处理。元素的标题部分对此很有效。

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

此外,在 Controller 中使用 jQuery 并不是一个好习惯,请注意。

关于javascript - JQuery UI Draggable Div 带有滚动条到鼠标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29522063/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com