Beispiel für eine ziehbare JQuery-Benutzeroberfläche

Das Ziehen ist eine allgemeine Funktion, bei der es sich um ein Ereignis handelt, das das Ziehen ermöglicht, indem DOM-Elemente mit der Maus verschoben werden können. Es ist so etwas wie wenn wir ein Objekt greifen und es an einen anderen Ort ziehen. Es ist eine intuitive Möglichkeit für den Benutzer, mit der Website oder Anwendung zu interagieren. Sobald das Element ziehbar ist, können wir es per Mausklick an eine beliebige Stelle im Ansichtsfenster ziehen. Ein Drag-Vorgang könnte mithilfe von Mausereignissen ausgeführt werden und der Drop-Vorgang könnte durch das Loslassen der Maus ausgelöst werden. Dieses Drop-Ereignis tritt auf, wenn die gezogenen Daten an einer anderen Stelle im Ansichtsfenster abgelegt werden.

  • Erstellen Sie Schaltflächen mit jQueryUI
  • So erkennen Sie die jQuery-Version
  • So finden Sie eine CSS-Klasse in einem Element

Der Drag-Vorgang kann zum Ausführen einiger Aufgaben verwendet werden, z. B. zum Verschieben von E-Mail-Nachrichten oder Inhalten in Ordner, zum Neuanordnen von Elementlisten usw. Die Drag-Methode kann in folgenden Formen verwendet werden:

  • $(selector, context).draggable(options)
  • $(selector, context).draggable(“actions”, [params])

Das Folgende ist ein einfaches Beispiel für ein ziehbares 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:orange;
	text-align:center;
	}
</style>
   <script type="text/javascript">
      $(function () {
         $('#DragMe').draggable();
      });
   </script>
</head>
<body>
	<div id="DragMe">
		<p>Drag me</p>
	</div>
</body>
</html>

Das obige Skript verwendet die Methode draggable(), die Elemente an eine andere Position im Ansichtsfenster verschiebt. Wir verwenden den ID-Selektor „DragMe“ innerhalb des div-Elements und stellen mithilfe dieses Selektors verschiedene CSS-Stile bereit, um das Ergebnis als angegebene Werte anzuzeigen.

JQueryUI-Draggable-SimpleExample-Demo

JQueryUI Draggable Simple Beispiel

Optionen für ziehbare Widgets

Die ziehbare Methode enthält folgende Optionen:

Option Beschreibung Standardwert

addClassesEs ist möglich, das Hinzufügen der UI-Draggable-Klasse zu verhindern. Setzen Sie diese Option in der Liste der DOM-Elemente auf „false“.WAHR
AnhängenBeim Ziehen wird das angegebene Element angehängt.Elternteil
MauszeigerEs gibt den Mauszeiger an, wenn sich ein Element bewegt.Auto
EindämmungEs zieht das Element innerhalb der Grenzen der Region.FALSCH
AchseEs definiert die Achse, um die sich die gezogenen Elemente entlang der Werte wie der horizontalen oder vertikalen Achse bewegen.Null
stornierenEs wird verwendet, um den Ziehvorgang für das angegebene Element abzubrechen.Eingabe, Textbereich, Schaltfläche, Auswahl, Option
CursorAtEs gibt den Offset zum Mauszeiger anFALSCH
VerzögerungEs gibt die Verzögerungszeit in Millisekunden an, wenn die Mausbewegung berücksichtigt wird.0
deaktiviertEs deaktiviert die Bewegung von Elementen, wenn es auf „true“ gesetzt ist, dh es ist nicht mehr ziehbar.1
DistanzEs bestimmt die Verschiebung vor der Bewegung des Cursors in Form von Pixeln.1
NetzEs zieht die Elemente in ein Rastersystem mit x- und y-Pixeln in Form von [x,y].FALSCH
handhabenDer Griff, der das Draggable startet.FALSCH
HelferEs bietet ein Hilfselement zum Ziehen der Anzeige.Original
OpazitätEs sorgt für die Deckkraft des Elements beim Verschieben.FALSCH
zurückkehrenDas Element wird nach Abschluss der Verschiebung wieder in seine ursprüngliche Position zurückversetzt.FALSCH
revertDurationEs bestimmt die Dauer in Millisekunden, nach der das Element in seine ursprüngliche Position zurückkehrt.500
UmfangEs definiert Sätze von Elementen, die per Drag & Drop verschoben werden können.Standard
scrollenEs scrollt das Element, wenn es aus dem Ansichtsfenster des Fensters verschoben wird.WAHR
ScrollgeschwindigkeitEs zeigt die Scrollgeschwindigkeit an.20
SchnappEs zeigt die Elemente an, die auf den anderen Elementen verschoben werden.FALSCH
FangmodusEs bestimmt die Anpassung zwischen dem verschobenen Element und options.snap .beide
snapToleranceEs gibt die maximale Anzahl von Pixeln an, um die Anpassung vorzunehmen.20
StapelEs bringt das passende Element aus der Menge der Elemente nach vorne.FALSCH
zIndexBeim Ziehen wird der Z-Index für den Helfer initialisiert.FALSCH

Beispiel mit Optionen

<!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: 200px; height: 200px; background:orange;}
    #DragHelper { width: 200px; height: 200px; background: red; }
</style>
<script type="text/javascript">
$( init );
function init() {
  $('#DragMe').draggable( {
    cursor: 'move',
    containment: 'document',
    helper: myHelper
  } );
}
function myHelper( event ) {
  return '<div id="DragHelper">Please drag me!!!</div>';
}
</script>
</head>
<body>
	<div id="mydemo">
	  <div id="DragMe">Drag to see helper element</div>
	</div>
</body>
</html>

JQueryUI-Draggable-Options-Demo
Beispiel für ziehbare JQueryUI-Optionen

Methoden für ziehbare Widgets

Die folgende Tabelle zeigt einige der Methoden, die mit ziehbaren Widgets verwendet werden:

Methodenbeschreibung

zerstören()Dadurch wird die ziehbare Funktionalität entfernt.
deaktivieren()Diese Methode deaktiviert die Ziehaktion.
aktivieren()Diese Methode aktiviert die Drag-Aktion.
Beispiel()Es erstellt das ziehbare Instanzobjekt.
Optionen()Es gibt die Optionseigenschaft zurück. Es legt die ziehbare Option mit dem angegebenen Optionsnamen fest.
widget()Es definiert ein ziehbares Elementobjekt.

Beispiel mit 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>
  #mydiv1
  {
      width:60%;
      height:40px;
      background:orange;
   }
   #mydiv2
   {
         width:60%;
         height:40px;
         background:pink;
   }
</style>
</head>
<body>
   <div id="mydiv1" style="border:1px solid red;">
	  <p>This is disabled element.</p>
   </div>
   <div id="mydiv2" style="border:1px solid green;">
      <p>This is enabled element.</p>
   </div>
<script>
	   $("#mydiv1 p").draggable ();
	   $("#mydiv1 p").draggable ('disable');
	   $("#mydiv2 p").draggable ();
	   $("#mydiv2 p").draggable ('enable');
</script>
</body>
</html>

JQueryUI-Draggable-Methods-Demo

Beispiel für ziehbare JQueryUI-Methoden

Ziehbare Widget-Ereignisse

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

Eventbeschreibung

erstellenEs wird ausgelöst, wenn ein ziehbares Element erstellt wird.
StartEs ruft auf, wenn mit dem Ziehen des Elements begonnen wird.
ziehenEs wird aufgerufen, wenn die Maus während des Ziehens bewegt wird.
stoppenEs wird ausgelöst, wenn ein Drag beendet wird.

Beispiel mit 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>
</head>
<body>
   <div id="mydiv1" style="border:1px solid red;">
	  <p>Welcome to JQuery UI!!!</p>
   </div>
<script type="text/javascript">
  $('#mydiv1 p').draggable( {
    cursor: 'move',
    stop:function(event, ui){
       alert("Drag is Ended!!!");
    }
  });
</script>
</body>
</html>

JQueryUI-Draggable-Events-Demo

Beispiel für ziehbare JQueryUI-Ereignisse

Kommentar verfassen

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

Nach oben scrollen