當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

EasyUI中拖动draggable的使用

發布時間：2025/3/19 编程问答 13 豆豆

生活随笔收集整理的這篇文章主要介紹了 EasyUI中拖动draggable的使用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

場景

EasyUI環境搭建與入門基礎語法：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/90760947

效果

實現

在webapp下新建pages目錄，在pages目錄下新建draggable目錄，并在其下新建basic.html

通過class屬性實現

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>拖拽</title><link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css"><script type="text/javascript" src="/easyui/jquery.min.js"></script><script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script> </head> <body><div? class="easyui-draggable" style="width:300px; height:300px; border:1px solid #ccc">可拖拽</div> </body> </html>

通過js實現

??? <div? id="drag" style="width:300px; height:300px; border:1px solid #ccc">通過js實現可拖拽</div> <script type="text/javascript">$(function () {$("#drag").draggable();}) </script>

局部區域拖動

實現拖動局部才能拖動，比如標題。

通過handle屬性實現，其中屬性值為要局部拖動的選擇器。

<div? id="dragTitle" class="easyui-draggable" style="width:300px; height:300px; border:1px solid #ccc" handle="#title"><div id="title" style="background-color: #CC2222">標題拖動</div></div>

效果

js初始化拖動代理

新建proxy.html

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>拖動代理</title><link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css"><script type="text/javascript" src="/easyui/jquery.min.js"></script><script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script></head> <body> <div? id="dragProxy" style="width:300px; height:300px; border:1px solid #ccc">js初始化拖動代理 </div> <script type="text/javascript">$(function () {$("#dragProxy").draggable({proxy:"clone"});}) </script> </body> </html>

效果

自定義拖動代理

效果

限制區域拖動

新建container.html

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>限制區域拖動</title><link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css"><script type="text/javascript" src="/easyui/jquery.min.js"></script><script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script> </head> <body> <div?? style="width:300px; height:300px; border:1px solid #ccc" ><div id="container" style="width:100px; height:100px;background-color: #CC2222"></div> </div> <script type="text/javascript">$(function () {$("#container").draggable({//onDrag為拖動事件onDrag:function (e) {var d = e.data;//如果拖動到最左邊if(d.left<d.parent.offsetLeft){d.left=d.parent.offsetLeft;}//如果拖動到最上邊if(d.top<d.parent.offsetTop){d.top=d.parent.offsetTop;}if(d.left+$(d.target).outerWidth()>$(d.parent).outerWidth()+d.parent.offsetLeft){d.left=$(d.parent).outerWidth()-$(d.target).outerWidth()+d.parent.offsetLeft;}if(d.top+$(d.target).outerHeight()>$(d.parent).outerHeight()+d.parent.offsetTop){d.top=$(d.parent).outerHeight()-$(d.target).outerHeight()+d.parent.offsetTop;}}});}) </script> </body> </html>

效果

限制范圍拖動

總結

以上是生活随笔為你收集整理的EasyUI中拖动draggable的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Jquery中使用Validate插件使
下一篇： SpringBoot+Jquery+js