jQueryEasyUI中的拖拽事件如何使用
jQueryEasyUI中的拖拽事件通过给它设置代理元素使其拖拽、可设置拖动元素相对于x.y轴拖动，可设置拖拽何时停止等效果
jQuery中的easyui是一个非常好用的插件，它虽然使用简单方便，但是它的功能确十分强大，今天将向大家介绍如何使用easyui插件实现基本的拖动和放置，有一定的参考价值，希望对大家有所帮助。
【推荐课程：jQueryEasyUI教程】
Draggable(拖拽)
Draggable是easyui中用于实现拖拽功能的一个插件，通过它我们可以实现对控件的拖拽效果。
它具有以下属性值：
属性名含义proxy
指拖动时要使用的代理元素，设置为clone时，克隆元素将被用作代理；如果指定一个函数，它必须返回一个 jQuery 对象。revert是一个boolean值，设置为 true时表示拖动结束后元素将返回它的开始位置。 （默认值为false）cursor 拖动时的 css 光标，默认值为move deltaX 指的是拖动的元素相对于当前光标的 X 轴的位置，默认值为null deltaY 指的是拖动的元素相对于当前光标的 Y 轴位置，默认值为null handle 指启动可拖动元素的处理，默认值为null disabled是一个boolean值，如果设置为 true，则停止可拖动，默认值为false edge 指能够在其中开始可拖动的拖动宽度，默认值为0 axis 指定义拖动元素可在其上移动的轴，可用的值是 \’v\’ 或 \’h\’，当设为 null，将会沿着 \’v\’ 和 \’h\’ 的方向移动
案例分析：
通过三个div元素来启用它们的拖动和放置
外部引用必须有的插件
<link rel=\”stylesheet\” type=\”text/css\” href=\”D:\\jquery-easyui-1.6.10\\themes\\default\\easyui.css\”>
<link rel=\”stylesheet\” type=\”text/css\” href=\”D:\\jquery-easyui-1.6.10\\themes\\icon.css\”>
<script src=\”D:\\jquery-easyui-1.6.10\\jquery.min.js\”></script>
<script src=\”D:\\jquery-easyui-1.6.10\\jquery.easyui.min.js\”></script>
HTML与CSS代码
<style>
div{
width:100px;
height: 100px;
margin-bottom:5px;
text-align: center;
line-height: 100px;
}
#box1{background: pink;}
#box2{background: skyblue;}
#box3{background: yellow;}
</style>
</head>
<body>
<div id=\”box1\”>box1</div>
<div id=\”box2\”>box2</div>
<div id=\”box3\”>box3</div>
效果图：
设置box1元素为可拖动的
$(\’#box1\’).draggable();
效果图：
对于box2通过给原来的元素的代理（proxy）创建一个clone值，让其可以拖动
$(\’#box2\’).draggable({
proxy:\’clone\’
});
效果图：
第三个box我们设置元素只能在v轴上拖动：
$(\”#box3\”).draggable({
axis: \’v\’
})
效果图：
总结：以上就是本篇文章的全部内容了，希望对大家学习有所帮助。
以上就是jQueryEasyUI中的拖拽事件如何使用的详细内容，更多请关注其它相关文章！
更多技巧请《转发 + 关注》哦！
jQuery基础回顾——事件冒泡、移除事件、模拟事件
- 什么是冒泡
在页面上可以有多个事件，也可以多个元素响应同一个事件，假设网页上有两个元素，其中一个元素嵌套在另一个元素里，并且都被绑定了click事件，同事<body>元素上也绑定了click事件，当单击内部<span>元素，即触发<span>元素的click事件，会输出3条记录，这就是由事件冒泡引起的。
示例代码
示例效果
在单击<span>元素的同时，也单击了包含<span>元素的元素<div>和包含<div>元素的<body>，并且每一个元素都会按照特定的顺序响应click事件。
- 事件冒泡引发的问题
事件冒泡可能会引起意料之外的效果，上例中，本来只想触发<span>元素的click事件，然而<div>和<body>元素的click事件也同时被触发了，因此，有必要对事件的作用范围进行限制，当单击<span>时，只触发该元素的click事件，当单击<div>时，只触发<div>元素的click事件。
想要阻止事件冒泡，只需要在对应事件的响应函数里返回 false（ return false;） 即可。
在绑定事件的过程中，不仅可以为同一个元素绑定多个事件，也可以为多个元素绑定同一个事件，假设网页上有一个<button>元素，使用以下代码为该元素绑定多个相同的事件。
当单击按钮后，会出现下图所示的效果
示意动画
1、移除按钮元素上以前注册的事件
首先在网页上添加一个移除事件的按钮。
然后为按钮绑定一个事件，jQuery代码如下：
下面来看看off()方法的语法结构：
events:一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如\”click\”, \”keydown.myPlugin\”, 或者 \”.myPlugin\”.
selector:一个最初传递到.on()事件处理程序附加的选择器。
fn:事件处理程序函数以前附加事件上，或特殊值false.
具体说明如下：
1) 如果没有参数，则删除所有绑定的事件。
2) 如果提供了事件类型作为参数，则只删除该类型的绑定事件。
3) 如果把在绑定时传递的处理函数作为第2/3个参数，则只有这个特定的事件处理函数会被删除。
2、移除<button>元素的其中一个事件
首先需要为这些匿名处理函数指定一个变量，例如下面的jQuery代码：
然后就可以单独删除某一个事件了，jQuery代码如下：
另外，对于只需要触发一次，随后就立即要解除绑定的情况，jQuery提供了一种简写法——one()方法，one()方法可以为元素绑定处理函数，当处理函数出发一次后立即被删除。其语法结构同on()方法类似，使用方法也相同。
- 常用模拟
以上的例子都是用户必须通过单击按钮才能触发click事件，但是有时，需要通过模拟用户操作来达到单击的效果，例如在用户进入页面后，就触发click事件，而不需要用户主动单击。
在jQuery中，可以使用trigger()方法完成模拟操作，例如可以使用下面的代码来触发id为btn的按钮的click事件：
这样，当页面加载完毕后，就会立刻输出想要的效果，也可以直接用简化写法click()，来达到同样的效果。
- 触发自定义事件
trigger()方法不仅能触发浏览器支持的具有相同名称的事件，也可以触发自定义名称的事件，此时传入的参数名为自定义事件的名。
- 传递数据
trigger(type,[data])方法有两个参数，第1个参数是要触发事件的类型，第2个参数是要传递给事件处理函数的附加数据，以数组形式传递，通常可以通过传递一个参数给回调函数来区分这次事件是代码触发还是用户触发的：
示意
- 执行默认操作
trigger()方法触发事件后，会执行浏览器默认操作。
以上代码不仅会触发<input>元素绑定的focus事件，也会使该元素本身得到焦点（这是浏览器的默认操作）。
如果只想触发绑定的focus事件，而不想执行浏览器默认操作，可以使用jQuery中另一个类似的方法——triggerHandler()方法。
该方法只会触发<input>元素上绑定的特定事件，同时取消浏览器对此事件的默认操作，即文本框只触发绑定的focus事件，而不会得到焦点。
若感觉对您有用，可以关注并转发，您的关注是对我莫大的支持！
关注并转发后私信“jQuery基础材料”获取线下资料，包括完整基础资料、chm文档、示例代码及其他参考资料。
上一节：
下一节：
jquery的事件名称和命名空间的方法
我们先看一些代码：
当然，我们也可以用bind进行事件绑定。我们看到上面的代码，我们可以在事件后面，以点号，加我们的名字，就是事件命名空间。所谓事件命名空间，就是事件类型后面以点语法附加一个别名，以便引用事件，如”click.a”，其中”a”就是click当前事件类型的别名，即事件命名空间。
假如我们要删除如下命名空间：
我们可以用：
要注意的是：
假如我们写了如下代码：
那么我们要用trigger触发click事件，也就是触发第一个，岂不是把click.a和click.a.bb都触发了，那如何解决这个问题呢，我只想触发click，而不触发click.a及以下的命名空间？
没关系！有如下解决办法：
如果事件类型后面附加感叹号，则表示触发不包含命名空间的特定事件类型。
假如我们只想触发click，可以这么写：
只触发bb，可以这么写：
有了命名空间，可以方便我们在同一个事件上面做管理啦！！！
自定义事件
我在这里就不多描述了！所有自定义事件都可以通过jQuery方法触发，例如下面的示例自定一个Delay事件类型，并把它绑定到input元素对象上，然后在按钮单击事件中触发自定义事件。
自定义事件不是真正意义上的事件，可以把它理解为自定义函数，触发自定义事件就相当于调用自定义函数。
通过上面的介绍，不知道大家对jquery的事件名称和命名空间有没有更深的了解了呢！期待您留言交流！
切图网（qietu.com）专业从事web前端开发的，专注we前端开发，响应式布局，webapp手机端网页制作，微信html5页面制作，bootstrap布局等，关注用户体验。
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
