집 >웹 프론트엔드 >JS 튜토리얼 >easyUI 드래그 작업에서 droppable 및 draggable 사용 예

easyUI 드래그 작업에서 droppable 및 draggable 사용 예

小云云원래의: 2018-01-10 10:42:151791검색

이 글은 easyUI 드래그 작업에서 droppable과 draggable의 사용 예를 주로 소개합니다. 관심 있는 친구들이 참고할 수 있기를 바랍니다.

이 데모 디스플레이의 효과는 다음과 같습니다. 상단에서 아래의 해당 상자로 드래그할 수 있으며(원본 상자는 더 이상 드래그할 수 없음) 상자 밖의 항목을 드래그하여 취소할 수 있습니다

------ -- ---다음은 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 사용 예

관련 기사