极客教程EasyUI jQuery Draggable widget
在这篇文章中，我们将学习如何使用jQuery EasyUI设计一个可拖动的小部件。EasyUI是一个HTML5框架，用于使用基于jQuery、React、Angular和Vue技术的用户界面组件。它有助于为交互式网络和移动应用程序构建功能，为开发者节省大量的时间。
该小组件从标记或选择器创建一个可拖动的元素。
下载EasyUI for jQuery:
https://www.jeasyui.com/download/index.php
语法:
var a = $(".selector").draggable({
});
属性:
- proxy。它的类型是字符串或函数。一个代理元素要用来设置’克隆’。一个clone元素被用作代理。如果一个函数被指定，它必须返回一个jQuery对象。
- revert。它的类型是布尔值。当拖动停止时，该元素将返回到其起始位置。
- cursor。它的类型是字符串。拖动时要显示的CSS光标。
- delta X : 它的类型是数字。与当前光标对应的被拖动元素位置X。
- delta Y : 它的类型是数字。与当前光标对应的被拖动元素位置Y。
- handle : 它的类型是一个选择器。启动可拖动的句柄。
- disabled。它的类型是布尔值。如果它被设置为true，可拖动功能将被禁用。
- edge。它的类型是数字。拖动的宽度，可用于启动可拖动的属性。
- axis。它的类型是一个字符串。它设置拖动元素移动的轴。
- delay。它的类型是一个延迟。它定义了以毫秒为单位的延迟时间。
事件:
- onBeforeDrag：该参数是一个事件。它在拖动之前触发。
- onStartDrag：该参数是一个事件。它在对象开始拖动时触发。
- onDrag：该参数是一个事件。它在拖动时触发。
- onEndDrag：该参数是一个事件。它在拖动结束时触发。
- onStopDrag：该参数是一个事件。它在拖动停止时触发。
方法:
- options。它返回options属性。
- proxy。如果代理属性被设置，它将返回拖动代理。
- Enable。它启用拖动动作。
- disabled。它使拖动动作失效。
注意：在下面的例子中只显示了几个例子，开发者可以根据应用程序的要求，尝试使用上面列出的其他属性、事件和方法。
CDN链接：首先，添加你的项目需要的jQuery Easy UI脚本。
<script type=”text/javascript” src=”jquery.min.js”></script>
<!–jQuery libraries of EasyUI –>
<script type=”text/javascript” src=”jquery.easyui.min.js”></script>
<!–jQuery library of EasyUI Mobile –>
<script type=”text/javascript” src=”jquery.easyui.mobile.js”></script>
例子：下面的例子演示了jQuery EasyUI Draggable widget。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="initial-scale=1.0, maximum-scale=1.0,
user-scalable=no">
<!-- EasyUI specific stylesheets-->
<link rel="stylesheet" type="text/css"
href="themes/metro/easyui.css">
<link rel="stylesheet" type="text/css"
href="themes/mobile.css">
<link rel="stylesheet" type="text/css"
href="themes/icon.css">
<!--jQuery library -->
<script type="text/javascript" src="jquery.min.js">
</script>
<!--jQuery libraries of EasyUI -->
<script type="text/javascript"
src="jquery.easyui.min.js">
</script>
<!--jQuery library of EasyUI Mobile -->
<script type="text/javascript"
src="jquery.easyui.mobile.js">
</script>
<script type="text/javascript">
(document).ready(function (){
('#gfg1').draggable({
handle:'#drag1',
});
});
(document).ready(function (){
('#gfg').draggable({
handle:'#drag',
cursor: 'pointer',
revert: 'true'
});
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>EasyUI Draggable Widget</h3>
<div id="gfg">
<div id="drag"
style="background:rgb(199, 199, 199);
width: 180px;">
<p>Revert Draggable Element
<p>
</div>
</div>
<div id="gfg1">
<div id="drag1"
style="background:rgb(199, 199, 199);
width: 180px;">
<p>Draggable Element
<p>
</div>
</div>
</body>
</html>
输出:
