场景

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>

效果

自定义拖动代理

<!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:function(source){var p =$("<div  style='width:300px; height:300px; border:1px solid red'>");p.appendTo("body");return p;}});})
</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的使用相关推荐

ajax与easyui树节点,EasyUI中的tree用法介绍
真的是太忙了,本应该有好多东西可以写,但是没什么闲时间,每次想到写的时候,来点事就又给忘了.10月最后一天了,在忙也得把这篇文章写完,不然又得多一个空白月了. 这是之前带领成员开发一个小模块功能的时候 ...
datagrid vue_类似 easyui 中 datagrid 使用习惯的 element-ui 数据表格组件（el-datagrid）...
背景 element-ui 中的 el-table 组件只提供了数据展示,而分页功能作为一个单独的组件 el-pagination,并没有像 Ant Design 一样集成到 el-able 组件中, ...
easyui下拉框option写死_JavaScript_jQuery+easyui中的combobox实现下拉框特效，1.第一种写法：Input框中显示： - phpStudy...
jQuery+easyui中的combobox实现下拉框特效 1.第一种写法:Input框中显示: 2. 第二种用法,在list列表中显示: 类别 3. 第二种的另一种写法: 类别以上3种方法均可实 ...
Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法
Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法在添加完之后,可以使用 $.parser.parse();这个方法进行处理: (1) 对整个页面重新渲染: $.parser ...
easyui中combotree只能选子选项，父级不被选中
前言前几天面试遇到一个需求(easyui中combotree只能选子选项,父级不被选中),回来特意整理下,大概的思想是如果该tree的节点被选中是判定一下是否有子节点,如果没有就说明是最终节点了,步 ...
小谈EasyUI中的tree用法
不知不觉10月都结束了,又要到年底了.看看自己上次写过的文章后,已经2个月都没写东西了.真的是太忙了,本应该有好多东西可以写,但是没什么闲时间,每次想到写的时候,来点事就又给忘了.10月最后一天了,在 ...
jQuery easyui中combox 自定义样式去掉下拉框的空白
EasyUI中combox下拉框的默认样式有一大块空白,非常影响美观.使用"panelHeight="auto"属性可以去掉空白: <div style ...
VB实现指示窗口中拖动方框的程序
引自:http://dev.21tx.com/2008/11/06/14137.html 在指示窗口中拖动方框的程序如下: '用Form_Load.Map1_AfterLayerDraw.Map1_A ...
easyUI中combobox中idFeild和textFeild的取值方法
easyUI中combobox是比较常用的选择数据的方式,在官方的API说明中是这样描述的:扩展自 $.fn.combo.defaults.使用 $.fn.combobox.defaults重写默认值 ...

EasyUI中拖动draggable的使用

场景

效果

实现