如何约束jqueryui';它可以拖成一个圆圈
我想用jQueryUI的可拖动小部件将控制器约束在一个圆的区域内。我写了一些这样的代码:如何约束jqueryui';它可以拖成一个圆圈,jquery,jquery-ui,draggable,geometry,Jquery,Jquery Ui,Draggable,Geometry,我想用jQueryUI的可拖动小部件将控制器约束在一个圆的区域内。我写了一些这样的代码: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<style>
.draggable {
width: 80px;
height: 80px;
border: thin solid #000000;
border-radius: 40px;
position: relative;
top: 110px;
left: 110px;
background-color: #000000;
}
.containment-wrapper {
height: 300px;
width: 300px;
border: thin solid #000000;
border-radius: 150px;
}
</style>
</head>
<body>
<div class="containment-wrapper">
<div id="draggable" class="draggable"></div>
</div>
</body>
<script>
$( "#draggable" ).draggable({ containment: "parent" });
</script>
</html>
.拖拉{
宽度:80px;
高度:80px;
边框:薄实线#000000;
边界半径:40px;
位置:相对位置;
顶部:110px;
左:110像素;
背景色:#000000;
}
.安全壳包装{
高度:300px;
宽度:300px;
边框:薄实线#000000;
边界半径:150px;
}
$(“#draggable”).draggable({containment:“parent”});
黑色圆圈可以沿着的路径实际上是一个矩形,即使包装器div
的外观也是一个圆形
如何纠正这一点以符合我的目的?请看这一点,它可以帮助您p:这可能会有帮助(: