Die easyui Droppable-Komponente implementiert Platzierungseffekte-js-Tutorial-php.cn

Die easyui Droppable-Komponente implementiert Platzierungseffekte

PHPz

Freigeben： 2018-09-29 11:05:08

nach vorne

1188 Leute haben es durchsucht

Droppable und Draggable sind ähnlich, der Unterschied besteht jedoch darin, dass sich ersteres auf das Platzieren von Elementen in einem Container konzentriert, während letzteres sich darauf konzentriert, ziehbar zu sein (obwohl mit beiden einige Effekte erzielt werden können). Und wenn wir uns den Easyloader-Quellcode ansehen, können wir erkennen, dass Droppable nicht von Draggable abhängt.

Die sogenannte Platzierung besteht darin, ein Objekt in ein Objekt einzufügen. Natürlich ist es für easyui wichtig, verschiedene Effekte auszulösen. Gleichzeitig ist diese Komponente nicht von anderen Komponenten abhängig.

Dropable-Lademethode

1, Klassenladen Die Klassenlademethode hat mir noch nie gefallen. Sie verschwendet eine Position und sieht chaotisch aus, wenn es zu viele Codes gibt.

Der Code lautet wie folgt:

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

Nach dem Login kopieren

2,js-Ladeaufruf

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

Nach dem Login kopieren

Dropable attributes

1 ,akzeptieren

Standard ist null, bestimmen Sie, welche Elemente akzeptiert werden, dh welches Element platziert werden kann

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

Nach dem Login kopieren

2, deaktiviert　

Standard ist falsch Wenn wahr, es ist verboten Drop

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

Nach dem Login kopieren

Dropable Event List

　1,onDragEnter wird ausgelöst, wenn das Element in den Drop-Bereich gezogen wird

　2, onDragOver wird ausgelöst, wenn das gezogene Element den Platzierungsbereich passiert

3. onDragLeave wird ausgelöst, wenn das gezogene Element den Platzierungsbereich verlässt

4. onDrop wird ausgelöst, wenn das gezogene Element im Platzierungsbereich platziert wird Bei Auslösung

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

Nach dem Login kopieren

Dropable-Methodenliste

1, Optionen geben Attributobjekt zurück

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

Nach dem Login kopieren

2, aktivieren, deaktivieren und die oben genannten Attribute Die Funktionen sind die gleichen, nämlich das Aktivieren und Deaktivieren der Platzierung

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

Nach dem Login kopieren

Lassen Sie mich Ihnen das offizielle Beispiel zeigen

<!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>

Nach dem Login kopieren

Die Betriebsdarstellungen werden hier nicht angegeben, die offizielle Website kann dies tun direkt verwendet werden. Prüfen. OVER!

Effektadresse: http://www.jeasyui.com/demo/main/index.php?plugin=Droppable&theme=default&dir=ltr&pitem=

Oben Das ist der gesamte Inhalt dieses Kapitels. Weitere verwandte Tutorials finden Sie unter jQuery-Video-Tutorial, jQuery EasyUI-Video-Tutorial!