快捷導(dǎo)航

詳解有關(guān)easyUI的拖動操作中droppable，draggable用法例子

更新時間：2017年06月03日 11:44:06 作者：南宮凌萱

本篇文章主要介紹了有關(guān)easyUI的拖動操作中droppable，draggable用法例子，具有一定的參考價值，感興趣的小伙伴們可以參考一下

這個demo展示的效果為：從上面可以拖動到下面相應(yīng)的框中（原有的不能再拖動），拖動框中的東西到外面可以取消

-----------以下為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>級聯(lián)統(tǒng)計指標(biāo)</span>
      <ul>
      </ul>
     </div>
     <div class="target-column">
      <span>列指標(biāo)</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
});
// 級聯(lián)統(tǒng)計指標(biāo)放置區(qū)
$('.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){
   // 判斷拖動的元素是否存在于放置區(qū)內(nèi)
   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');

   // 拖動放置區(qū)內(nèi)的元素
   $(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');
     }
   });
  }
});
// 列指標(biāo)放置區(qū)
$('.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){
   // 判斷拖動的元素是否存在于放置區(qū)內(nèi)
   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">計數(shù)</option></select></li>');
     Ele.appendTo('.target-column ul');
   }
   $(this).css('border','1px solid black');
   // 拖動放置區(qū)內(nèi)的元素
   $(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');
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: