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

2019-11-19 16:25:48

字体：大中小

来源：转载

供稿：网友

这个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>  <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');}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：详解nodeJS之二进制buffer对象

下一篇：利用vueJs实现图片轮播实例代码