有关easyUI的拖动操作中droppable，draggable用法例子

最新推荐文章于 2019-06-05 20:30:00 发布

疯子和傻子的爱情故事

最新推荐文章于 2019-06-05 20:30:00 发布

阅读量2.5k

点赞数

分类专栏： web前端

web前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

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

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

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