---

jQuery EasyUI 拖放

jQuery EasyUI 是一个基于 jQuery 的 UI 库，其中包括了很多实用的组件和插件，如：datagrid、tree、dialog、tabs、form、validate、layout、menu、panel、accordion、slider 等等，其中包括拖放组件，可实现拖动和拖放等功能，下面介绍如何使用拖放组件。

基本的拖动和放置

1. 引入 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>

2. HTML 代码：

<div id="from">请选择需要拖动的元素</div>
<div id="to">将元素拖动到这里</div>

3. 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>