jQuery EasyUI 拖放 - 基本的拖动和放置
jQuery EasyUI 拖放
jQuery EasyUI 是一个基于 jQuery 的 UI 库,其中包括了很多实用的组件和插件,如:datagrid、tree、dialog、tabs、form、validate、layout、menu、panel、accordion、slider 等等,其中包括拖放组件,可实现拖动和拖放等功能,下面介绍如何使用拖放组件。
基本的拖动和放置
- 引入 EasyUI 拖放 JS 和 CSS 文件:
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.7.0/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.7.0/themes/icon.css">
<script type="text/javascript" src="jquery-easyui-1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.7.0/jquery.easyui.min.js"></script>
- HTML 代码:
<div id="from">请选择需要拖动的元素</div>
<div id="to">将元素拖动到这里</div>
- JavaScript 代码:
$("#from").draggable({
revert:true // 当物体被拖出去的时候,自动返回初始位置
});
$("#to").droppable({
onDrop:function(e, ui) { // 当物体被放置的时候
alert("已经拖到目的地!");
}
});
拖放事件
以下是 EasyUI 拖放组件可用的一些事件:
- onStartDrag:物体开始被拖动时触发,返回 false 则禁止拖动。
- onStopDrag:物体停止被拖动时触发,返回 false 则物体停留在上一个位置。
- onDrag:物体正在被拖动时触发。
- onEnter:物体进入 drop 区域时触发此事件。
- onLeave:物体离开 drop 区域时触发此事件。
- onDrop:物体被拖动到 drop 区域,且鼠标放开时触发此事件。
除了 onEnter 和 onLeave 外,其它事件均有以下参数:
- e:jQuery 事件对象。
- ui:UI 对象,具有以下属性。
- ui.helper:正在被拖动的元素。
- ui.position:当前拖动的元素相对于文档的位置。
- ui.offset:当前拖动的元素相对于文档的偏移量。
- ui.draggable:当前正在被拖动的元素。
- ui.proxy:如果 axis 参数被设置为 ‘proxy’,则返回代理元素;否则返回 false。
可拖动的元素
可以通过设置属性来选择元素是否可以被拖动:
$("#from div").draggable({
// 可以拖动
});
$("#from p").draggable({
disabled:true // 不可拖动
});
悬停位置
可通过设置属性来限制拖动位置或生成代理元素:
$("#from").draggable({
// 限制在父元素内拖动
containment:"parent",
// 在拖动时,生成代理元素 "clone" 来代替原元素显示
proxy:'clone'
});
拖放示例
<div style="float:left;border:1px solid #ccc;padding:10px">
<h3>可拖动图标:</h3>
<div class="draggable" style="width:50px;height:50px;background-color:#ccc;cursor:pointer"></div>
<div class="draggable" style="width:50px;height:50px;background-color:#f00;cursor:pointer"></div>
<div class="draggable" style="width:50px;height:50px;background-color:#0f0;cursor:pointer"></div>
<div class="draggable" style="width:50px;height:50px;background-color:#00f;cursor:pointer"></div>
</div>
<div style="float:left;border:1px solid #ccc;padding:10px;margin-left:20px">
<h3>可放置区:</h3>
<div class="droppable" style="width:150px;height:150px;border:1px solid #ccc"></div>
</div>
<script>
$(".draggable").draggable({
revert:true,
proxy:'clone'
});
$(".droppable").droppable({
onDragEnter:function(e, ui) {
$(this).addClass("highlight");
},
onDragLeave:function(e, ui) {
$(this).removeClass("highlight");
},
onDrop:function(e, ui) {
$(this).removeClass("highlight");
$("<div>已放置元素</div>").appendTo(this);
}
});
</script>