recherche

Maison >interface Web >js tutoriel >Exemples d'utilisation de droppable et draggable dans l'opération de glisser easyUI

Exemples d'utilisation de droppable et draggable dans l'opération de glisser easyUI

小云云
小云云original
2018-01-10 10:42:151791parcourir

Cet article présente principalement les exemples d'utilisation de droppable et draggable dans l'opération de glisser easyUI. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

L'effet affiché par cette démo est le suivant : vous pouvez faire glisser du haut vers la case correspondante en dessous (celle d'origine ne peut plus être déplacée), et faire glisser les éléments dans la boîte à l'extérieur peut être annulé

----------Ce qui suit est 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>

-------------Ce qui suit est le code 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;);
}

Recommandations associées :

Tutoriel jQuery EasyUI - Droppable (placement)

droppable Expliquez

comment utiliser jQuery Draggable et Droppable pour implémenter le glisser-déposer function_jquery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

jquery easyui html JS
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Exemple de partage de l'implémentation jquery de la fonction d'agrandissement d'image et de changement de clicArticle suivant：Exemple de partage de l'implémentation jquery de la fonction d'agrandissement d'image et de changement de clic

Articles Liés

Voir plus