Maison >interface Web >js tutoriel >Le composant easyui Droppable implémente les effets de placement

Le composant easyui Droppable implémente les effets de placement

PHPzavant: 2016-05-16 15:44:281252parcourir

Droppable et draggable sont similaires, mais la différence est que le premier se concentre sur le placement d'éléments dans un conteneur, tandis que le second se concentre sur le fait d'être déplaçable (bien que certains effets puissent être obtenus par les deux). Et en regardant le code source d'easyloader, on peut savoir que droppable ne dépend pas de draggable.

Le soi-disant placement consiste à mettre un objet dans un objet. Bien entendu, il est essentiel pour easyui de déclencher divers effets. En même temps, ce composant ne dépendra pas d'autres composants.

Méthode de chargement droppable

1, chargement de classe Je n'ai jamais aimé la méthode de chargement de classe Cela gaspille une position et a l'air compliqué quand il y a trop de codes.

Le code est le suivant :

<p id=&#39;dd&#39; class="easyui-droppable" data-options="accept:&#39;#box,#pox&#39;"></p>

2, appel de chargement js

$("#box").droppable({
  accept:&#39;#pox&#39;,     //将元素pox 放置在元素box中
});

Attributs droppables

1 ,accepter

La valeur par défaut est nulle, déterminer quels éléments sont acceptés, c'est-à-dire quel élément peut être placé

$("#box").droppable({
  accept:&#39;#pox&#39;,     //将元素pox 放置在元素box中
});

2, désactivé　

La valeur par défaut est fausse Si vrai, c'est interdit Drop

$("#box").droppable({
  accept:&#39;#pox&#39;,     //将元素pox 放置在元素box中
  disabled : true ,    //禁止放置
});

Liste d'événements droppables

　1,onDragEnter se déclenche lorsque l'élément est glissé dans la zone de dépôt

　2, onDragOver est déclenché lorsque l'élément glissé traverse la zone de placement

3. onDragLeave Déclenché lorsque l'élément glissé quitte la zone de placement

4. onDrop Déclenché lorsque l'élément glissé est placé dans la zone de placement Lorsqu'elles sont déclenchées

onDragEnter /onDragOver/onDragLeave/onDrop: function (e,source){
   //source 参数获取DOM元素
 }

Liste de méthodes droppables

1, les options renvoient l'objet d'attribut

console.log($(&#39;#box&#39;).droppable(&#39;options&#39;));

2, activer, désactiver et les attributs ci-dessus Les fonctions sont les mêmes, qui consistent à activer et désactiver le placement

$(&#39;#box&#39;).droppable(&#39;enable/disable&#39;)

Laissez-moi vous montrer l'exemple officiel

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Accept a Drop - jQuery EasyUI Demo</title>
 <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/metro/easyui.css">
 <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/icon.css">
 <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/demo/demo.css">
 <script type="text/javascript" src="jquery-easyui-1.3.6/jquery.min.js"></script>
 <script type="text/javascript" src="jquery-easyui-1.3.6/jquery.easyui.min.js"></script>
</head>
<body>
 <div style="margin:20px 0;"></div>
 <div id="source" style="border:1px solid #ccc;width:300px;height:400px;float:left;margin:5px;">
  drag me!
  <div id="d1" class="drag">Drag 1</div>
  <div id="d2" class="drag">Drag 2</div>
  <div id="d3" class="drag">Drag 3</div>
 </div> 
 <div id="target" style="border:1px solid #ccc;width:300px;height:400px;float:left;margin:5px;">
  drop here!
 </div>
 <div style="clear:both"></div>
 <style type="text/css">
  .drag{
   width:100px;
   height:50px;
   padding:10px;
   margin:5px;
   border:1px solid #ccc;
   background:#AACCFF;
  }
  .dp{
   opacity:0.5;
   filter:alpha(opacity=50);
  }
  .over{
   background:#FBEC88;
  }
 </style>
 <script>
  /**
  使用js方式将元素设置为可draggable的
  */
  $(function(){
   $(&#39;.drag&#39;).draggable({
    proxy:&#39;clone&#39;,
    revert:true,
    cursor:&#39;pointer&#39;,
    onStartDrag:function(){
     $(this).draggable(&#39;options&#39;).cursor=&#39;not-allowed&#39;;//设置鼠标样式为不可拖动
     $(this).draggable(&#39;proxy&#39;).addClass(&#39;dp&#39;);//设置样式
    },
    onStopDrag:function(){
     $(this).draggable(&#39;options&#39;).cursor=&#39;auto&#39;;//设置鼠标
    }
   });
   //将容易置为droppable并且可接受元素
   $(&#39;#target&#39;).droppable({
    accept:&#39;#d1,#d3&#39;,
    onDragEnter:function(e,source){//拖入
     $(source).draggable(&#39;options&#39;).cursor=&#39;auto&#39;;
     $(source).draggable(&#39;proxy&#39;).css(&#39;border&#39;,&#39;1px solid red&#39;);
     $(this).addClass(&#39;over&#39;);
    },
    onDragLeave:function(e,source){//脱离
     $(source).draggable(&#39;options&#39;).cursor=&#39;not-allowed&#39;;
     $(source).draggable(&#39;proxy&#39;).css(&#39;border&#39;,&#39;1px solid #ccc&#39;);
     $(this).removeClass(&#39;over&#39;);
    },
    onDrop:function(e,source){//放下
     $(this).append(source)
     $(this).removeClass(&#39;over&#39;);
     alert("我被放下了");
    } ,
    //onDropOver当元素被拖出(成功放入到某个容器)的时候触发
    onDragOver:function(e,source){
      alert("我被拖出去了");//先于alert("我被放下了");执行,表明其触发在onDrop之前。
   }
   });
  });
 </script>
  
</body>
</html>

Les rendus des opérations ne sont pas donnés ici, le site officiel peut être utilisé directement Vérifier. TERMINÉ !

Adresse de l'effet : http://www.jeasyui.com/demo/main/index.php?plugin=Droppable&theme=default&dir=ltr&pitem=

Ci-dessus C'est tout le contenu de ce chapitre. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo jQuery, Tutoriel vidéo jQuery EasyUI !

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：JS DIV CSS implémente les compétences effect_javascript de liste déroulante de type formulaireArticle suivant：JS DIV CSS implémente les compétences effect_javascript de liste déroulante de type formulaire

Articles Liés

Voir plus