温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

easyUI中draggable怎么用

发布时间:2021-07-26 14:12:32 来源:亿速云 阅读:127 作者:小新 栏目:web开发

这篇文章主要介绍easyUI中draggable怎么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

示例:

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

以上是“easyUI中draggable怎么用”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI