Beispiel für ein JQueryUI Droppable Widget

Das jQueryUI Droppable-Plugin wird ausgelöst, wenn ein akzeptiertes Draggable über diesem Droppable abgelegt wird. Die Interaktion von Droppable hängt vom Draggable-Element ab. Im Allgemeinen können wir sagen, dass der Zielbereich für ziehbare Elemente ablegbar ist. Wir können auf der Seite ein Ziel erstellen, um ziehbare Elemente abzulegen.

lesen Sie auch:

  • JQuery Keydown, Keypress und Keyup
  • JQUEry-Einstellungs-Dropdown-Wert
  • JQuery prepend() und prependTo()

Das ablegbare Widget kann in zwei Formen verwendet werden:

  • $(selector, context).droppable (Optionen)
  • $(selector, context).droppable („Aktion“, Parameter)

Das Folgende ist ein einfaches Beispiel für ein ablegbares Widget:

<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type="text/css">
	#dragMe {
		   width: 150px;
		   height: 150px;
		   padding:0.5em;
		   background:gray;
		   float:left;
		   text-align:center;
		   margin:10px;
	}
	#dropMe
	{
		  width: 150px;
	 	  height:150px;
		  padding:0.5em;
		  background:orange;
		  float:left;
		  text-align:center;
		  margin:10px;
	}
</style>
<script>
	 $(function() {
		$( "#dragMe" ).draggable();
		$( "#dropMe" ).droppable();
	 });
  </script>
</head>
<body>
  <div id="dragMe">
	 <p>Drag Me</p>
  </div>
  <div id="dropMe">
	 <p>Drop Here</p>
  </div>
</body>
</html>

Führen Sie die einfache Droppable-Demo von JQueryUI aus

Beispiel für einfaches Droppable von JQueryUI

Dropable Widget-Optionen

Das ablegbare Widget enthält folgende Optionen:

Option Beschreibung Standardwert

akzeptierenEs gibt an, welche ziehbaren Elemente für den ablegbaren Bereich akzeptiert werden.*
aktiveKlasseEs gibt den CSS-Stil für das Droppable an, wenn ein akzeptiertes Element gezogen wird.FALSCH
addClassesDas Hinzufügen der ui-droppable-Klasse könnte verhindert werden, wenn sie auf „false“ gesetzt ist.WAHR
deaktiviertEs zeigt an, dass das abwerfbare Element deaktiviert werden kann, indem es auf „true“ gesetzt wird.FALSCH
gierigDadurch wird die Ereignisweitergabe auf verschachtelten Drop-ables verhindert, da das Element gelöscht wird, wenn es auf „true“ gesetzt ist.FALSCH
hoverClassEs gibt an, dass ein oder mehrere CSS-Stile dem ablegbaren Element hinzugefügt werden, während das Element mit der Maus über den ablegbaren Bereich bewegt wird.FALSCH
UmfangEs gruppiert die Sätze von ziehbaren und ablegbaren Elementen zu den Elementen, die über dieselben Optionen verfügen. Gültigkeitsbereich, dh der ziehbare Wert kann als ziehbarer Wert akzeptiert werden.Standard
ToleranzEs wird zum Testen verwendet, ob Draggable über einem Droppable schwebt.schneiden

Das Folgende ist ein Beispiel:

<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type="text/css">
	   #dragMe
		{
			   width: 150px;
			   height: 150px;
			   padding:0.5em;
			   background:brown;
			   float:left;
			   text-align:center;
			   margin:10px;
		}
       #dropMe
	   	{
	   		  width: 150px;
	   		  height:150px;
	   		  padding:0.5em;
	   		  float:left;
	   		  text-align:center;
	   		  margin:10px;
	   }
	   .active
	   {
			 border-color : cyan;
			 background :#F781D8;
		}
	  .hover
	  {
			border-color : red;
			background : #00FF80;
	  }
</style>
<script>
      $(function() {
         $( "#dragMe" ).draggable();
         $( "#dropMe" ).droppable({
            activeClass: "active",
            hoverClass:  "hover",
            greedy: true,
            accept: '#dragMe',
		     tolerance: 'touch',
		     drop: function(){
			alert('Element is dropped!!!');
		     }
         });
      });
</script>
</head>
<body>
   <div id="dragMe"  >
      <p>Drag me </p>
   </div>
   <div id="dropMe"  >
      <p>Drop here</p>
   </div>
</body>
</html>
  • Das obige Beispiel verwendet einige der Optionen wie activeClass, hoverClass, Accept und Tolerance.
  • Wenn wir das Skript ausführen und das Element über ein ablegbares Element ziehen, ändern sich die Hintergrundfarbe und die Rahmenfarbe des ablegbaren Elements, wenn die Maus über das ablegbare Element bewegt wird.
  • Wir verwenden CSS-Stile, um ein effektiveres Ergebnis auf der Webseite zu erzielen. Wir verwenden ID-Selektoren für Drag-and-Drop-Elemente und Klassenselektoren für Hover- und aktive Optionen.
  • Die Greedy-Option empfängt das Element, wenn ein Element auf ein abwerfbares Element abgelegt wird.

Führen Sie die JQueryUI Droppable Options Demo aus

Beispiel für abwerfbare JQueryUI-Optionen

Dropable Widget-Methoden

Die folgende Tabelle zeigt einige der Methoden, die mit Droppable Widget verwendet werden:

Methodenbeschreibung

zerstören()Es entfernt die Dropable-Funktionalität.
deaktivieren()Diese Methode deaktiviert die Drop-Aktion.
aktivieren()Diese Methode aktiviert die Drop-Aktion.
Beispiel()Es erstellt das löschbare Instanzobjekt.
Optionen()Es gibt die Optionseigenschaft zurück. Es legt die löschbare Option mit dem angegebenen Optionsnamen fest.
widget()Es definiert ein abwerfbares Elementobjekt.

Das folgende Beispiel demonstriert die Verwendung von Methoden:

<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
 .dragMe
 {
	 padding: 40px 25px;
	 border: 1px solid blue;
	 float: left;
	  margin:10px;
 }
 .dropMe
 {
     padding: 40px 25px;
	 border: 1px solid green;
	 float: left;
	 margin:10px;
 }
</style>
</head>
<body>
   <div  >Drag1</div>
   <div  >Drag2</div>
   <div  >Drag3</div>
   <div style="clear: both;"></div>
   <div  >Drop Here</div>
   <div  >Drop Here</div>
   <div  >Drop Here</div>
<script>
   $(function() {
	   $('.dragMe').draggable({ revert: true });
	   $('.dropMe').droppable({
	       hoverClass: 'active',
	       drop: function(e, ui) {
	           $(this).html(ui.draggable.remove().html());
	           $(this).droppable('destroy');
	       }
        });
    });
</script>
</body>
</html>
  • Im obigen Beispiel wird die Methode destroy verwendet, die die löschbare Funktionalität entfernt und das Element wieder in seinen Zustand vor der Initialisierung zurückversetzt.
  • Die CSS-Stile werden verwendet, um das Ergebnis effektiver auf der Webseite anzuzeigen.

Führen Sie die JQueryUI Droppable Methods-Demo aus

Beispiel für abwerfbare JQueryUI-Methoden

Droppbare Widget-Ereignisse

Die folgende Tabelle zeigt Ereignisse, die mit abwerfbaren Widgets verwendet werden:

Eventbeschreibung

aktivieren(Ereignis, ui)Dieses Ereignis wird ausgelöst, wenn das akzeptable Element mit dem Ziehen beginnt.
create(event, ui)Es wird ausgelöst, wenn ein ablegbares Element erstellt wird.
deaktivieren(Ereignis, UI)Es wird ausgelöst, wenn ein ziehbares Element nicht mehr gezogen wird.
drop(event, ui)Es wird ausgelöst, wenn das ziehbare Element auf dem Dropable abgelegt wird.
out(event, ui)Es wird ausgelöst, wenn ein ziehbares Element aus dem Drop-Element gezogen wird.
over(event, ui)Es wird ausgelöst, wenn ein ziehbares Element über das ablegbare Element gezogen wird.

Das folgende Beispiel veranschaulicht die Verwendung von Ereignissen:

<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
   #dragMe
   {
	   width: 150px;
	   height: 150px;
	   padding:0.5em;
	   background:brown;
	   float:left;
	   text-align:center;
	   margin:10px;
   }
   #dropMe
   {
	  width: 150px;
	  height:150px;
	  padding:0.5em;
	  float:left;
	  text-align:center;
	  margin:10px;
   }
</style>
</head>
<body>
   <div id="dragMe"  >
      <p>Drag me </p>
   </div>
   <div id="dropMe"  >
      <p>Drop here</p>
   </div>
   <div id="info" style="color:red;"></div>
<script>
$(function(){
   $("#dragMe").draggable();
   $("#dropMe").droppable({
      drop:function(event, ui){
         $("#info").html("dropped the element!!!");
      },
      over: function(event, ui){
         $("#info").html("moving in the element!!!");
      },
      out: function(event, ui){
         $("#info").html("moving out from the element!!!");
      }
   });
});
</script>
</body>
</html>
  • Das Skript verwendet Ereignisse wie Drop, die aktiviert werden, wenn ein Element auf dem Element abgelegt wird.
  • Das Out-Ereignis gibt an, dass das gezogene Element aus dem Drop-able gezogen wird.
  • Das Over-Ereignis gibt an, dass das gezogene Element über das Dropable gezogen wird.

Führen Sie die JQueryUI Droppable Events-Demo aus

Beispiel für löschbare JQueryUI-Ereignisse

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen