Heim > Artikel > Web-Frontend > Die easyui Droppable-Komponente implementiert Platzierungseffekte

Die easyui Droppable-Komponente implementiert Platzierungseffekte

PHPznach vorne: 2016-05-16 15:44:281193Durchsuche

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>

2,js-Ladeaufruf

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

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中
});

2, deaktiviert　

Standard ist falsch Wenn wahr, es ist verboten Drop

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

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元素
 }

Dropable-Methodenliste

1, Optionen geben Attributobjekt zurück

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

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;)

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>

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!

Stellungnahme：

Dieser Artikel ist reproduziert unter:jb51.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：JS DIV CSS implementiert formularähnliche Dropdown-Listen-Effekte_Javascript-FähigkeitenNächster Artikel：JS DIV CSS implementiert formularähnliche Dropdown-Listen-Effekte_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen