首页 >web前端 >js教程 >easyUI的拖动操作中droppable，draggable用法实例

easyUI的拖动操作中droppable，draggable用法实例

小云云原创: 2018-01-10 10:42:151797浏览

本文主要介绍了有关easyUI的拖动操作中droppable，draggable用法例子，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

这个demo展示的效果为：从上面可以拖动到下面相应的框中（原有的不能再拖动），拖动框中的东西到外面可以取消

-----------以下为HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" type="text/css" href="css/bootstrap-3.3.5/css/bootstrap.min.css" rel="external nofollow" >
  <link rel="stylesheet" type="text/css" href="css/easyui.css" rel="external nofollow" >
  <link rel="stylesheet" type="text/css" href="css/icon.css" rel="external nofollow" >
  <link rel="stylesheet" href="css/demo.css" rel="external nofollow" >
</head>
<body>
  <p class="container">
   <ul class="items">
     <li class="category">
      <i></i>
      <span>品类</span>
     </li>
     <li class="factory">
      <i></i>
      <span>工厂</span>
     </li>
     <li class="with-high">
      <i></i>
      <span>跟高</span>
     </li>
     <li class="with-type">
      <i></i>
      <span>跟型</span>
     </li>
     <li class="price">
      <i></i>
      <span>单价</span>
     </li>
   </ul>
   <p class="target">
     <p class="target-cascade">
      <span>级联统计指标</span>
      <ul>
      </ul>
     </p>
     <p class="target-column">
      <span>列指标</span>
      <ul>
      </ul>
     </p>
   </p>
  </p>
  <script src="js/jquery.js"></script>
  <script src="js/jquery.easyui.min.js"></script>
  <script src="js/demo.js"></script>
</body>
</html>

-------------以下为js代码

var tab = [];
$(&#39;.items li&#39;).draggable({
  proxy: &#39;clone&#39;,
  revert: true
});
// 级联统计指标放置区
$(&#39;.target-cascade&#39;).droppable({
  onDragEnter: function(e,source){
   $(this).css(&#39;border&#39;,&#39;1px solid red&#39;);
  },
  onDragLeave: function(e,source){
   $(this).css(&#39;border&#39;,&#39;1px solid black&#39;);
  },
  onDrop: function(e,source){
   // 判断拖动的元素是否存在于放置区内
   if($(source).draggable(&#39;options&#39;).proxy === &#39;clone&#39;){
     // 禁用拖动
     NotDrag(source);
     // 将拖入元素的原位置记录下来
     var buttonName = $(source).find(&#39;span&#39;).html();
     console.log("--------"+$(source).index());
     tab[buttonName] = $(source).index();//返回指定元素相对于其他元素的位置（0,1等）,如果没有找到，则返回-1
     var Ele = $(&#39;<li class=&#39;+ $(source)[0].className +&#39;><button>&#39;+ buttonName +&#39;</button></li>&#39;);
     Ele.appendTo(&#39;.target-cascade ul&#39;);
   }
   $(this).css(&#39;border&#39;,&#39;1px solid black&#39;);

   // 拖动放置区内的元素
   $(this).find(&#39;button&#39;).draggable({
     revert: true,
     onStopDrag: function(e){
      var _index = tab[$(this).html()];
      $(this).parent().remove();
      $(&#39;.items li:eq(&#39;+_index+&#39;)&#39;).draggable(&#39;enable&#39;);
      $(&#39;.items li:eq(&#39;+_index+&#39;)&#39;).find(&#39;i&#39;).css(&#39;backgroundColor&#39;,&#39;red&#39;);
     }
   });
  }
});
// 列指标放置区
$(&#39;.target-column&#39;).droppable({
  onDragEnter: function(e,source){
   $(this).css(&#39;border&#39;,&#39;1px solid red&#39;); 
  },
  onDragLeave: function(e,source){
   $(this).css(&#39;border&#39;,&#39;1px solid black&#39;);
  },
  onDrop: function(e,source){
   // 判断拖动的元素是否存在于放置区内
   if($(source).draggable(&#39;options&#39;).proxy === &#39;clone&#39;){
     // 禁用拖动
     NotDrag(source);
     var buttonName = $(source).find(&#39;span&#39;).html();
     tab[buttonName] = $(source).index();
     var Ele = $(&#39;<li class=&#39;+ $(source)[0].className +&#39;><button>&#39;+ buttonName +&#39;</button><select><option value ="show">显示</option>&#39;+
      &#39;<option value ="sum">求和</option><option value ="count">计数</option></select></li>&#39;);
     Ele.appendTo(&#39;.target-column ul&#39;);
   }
   $(this).css(&#39;border&#39;,&#39;1px solid black&#39;);
   // 拖动放置区内的元素
   $(this).find(&#39;button&#39;).draggable({
     revert: true,
     onDrag: function(e){
      $(e.data.parent).find(&#39;select&#39;).hide();
     },
     onStopDrag: function(e){
      var _index = tab[$(this).html()];
      $(this).parent().remove();
      $(&#39;.items li:eq(&#39;+_index+&#39;)&#39;).draggable(&#39;enable&#39;);
      $(&#39;.items li:eq(&#39;+_index+&#39;)&#39;).find(&#39;i&#39;).css(&#39;backgroundColor&#39;,&#39;red&#39;);

      $(e.target).siblings(&#39;select&#39;).show();
     }
   });
  }
});
//禁止拖动
function NotDrag(source){
  $(source).draggable(&#39;disable&#39;);//禁用拖动动作
  $(source).find(&#39;i&#39;).css(&#39;backgroundColor&#39;,&#39;grey&#39;);
}

easyUI的拖动操作中droppable，draggable用法实例

相关文章