script.aculo.us - Drag & Drop
Die beliebteste Funktion der Web 2.0-Oberfläche ist die Drag & Drop-Funktion. Glücklicherweise verfügt script.aculo.us über eine inhärente Funktion zur Unterstützung von Drag & Drop.
Um die Drag-Funktionen von script.aculo.us nutzen zu können, müssen Sie die laden dragdrop Modul, das auch die benötigt effectsModul. Ihre Mindestbelastung für script.aculo.us sieht also folgendermaßen aus:
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>Dinge herumschleppen
Es ist sehr einfach, ein Element mit script.aculo.us ziehbar zu machen. Dazu muss eine Instanz der Draggable- Klasse erstellt und das Element identifiziert werden, das ziehbar gemacht werden soll.
Draggable Syntax
new Draggable( element, options );Der erste Parameter für den Konstruktor identifiziert das Element, das entweder als ID des Elements oder als Verweis auf das Element ziehbar gemacht werden soll. Der zweite Parameter gibt optionale Informationen zum Verhalten des ziehbaren Elements an.
Ziehbare Optionen
Sie können eine oder mehrere der folgenden Optionen verwenden, während Sie Ihr ziehbares Objekt erstellen.
| Möglichkeit | Beschreibung | Beispiele |
|---|---|---|
| zurückkehren | Wenn true festgelegt ist , kehrt das Element am Ende des Ziehens an seine ursprüngliche Position zurück. Gibt auch an, ob der Rückruf für den Rückwirkungseffekt aufgerufen wird, wenn der Ziehvorgang beendet wird. Der Standardwert ist false . | Beispiel |
| einrasten | Wird verwendet, um zu bewirken, dass ein Draggable an einem Raster einrastet oder seine Bewegung einschränkt. Wenn false (Standard), tritt kein Einrasten oder Einschränken auf.
|
Beispiel |
| Zindex | Gibt den CSS-Z-Index an, der während eines Ziehvorgangs auf das Element angewendet werden soll. Standardmäßig ist der Z-Index des Elements beim Ziehen auf 1000 eingestellt. | Beispiel |
| Geisterbilder | Boolescher Wert, der bestimmt, ob das Draggable zum Ziehen geklont werden soll, wobei das Original an Ort und Stelle bleibt, bis der Klon gelöscht wird. Der Standardwert ist false . | Beispiel |
| Zwang | Eine Zeichenfolge, mit der die ziehbaren Richtungen entweder horizontal oder vertikal begrenzt werden . Der Standardwert ist null, was freie Bewegung bedeutet. | Beispiel |
| Griff | Gibt ein Element an, das als Handle zum Starten des Ziehvorgangs verwendet werden soll. Standardmäßig ist ein Element ein eigenes Handle. | Beispiel |
| Starteffekt | Ein Effekt, der beim Ziehen des Elements aufgerufen wird. Standardmäßig wird die Deckkraft des Elements in 0,2 Sekunden auf 0,2 geändert. | Beispiel |
| Reverteffekt | Ein Effekt, der auf das Element aufgerufen wird, wenn das Ziehen zurückgesetzt wird. Standardmäßig wird eine glatte Folie an die ursprüngliche Position des Elements verschoben . Wird nur aufgerufen, wenn das Zurücksetzen wahr ist. | Beispiel |
| Endeffekt | Ein Effekt, der beim Ziehen auf das Element aufgerufen wird. Standardmäßig wird die Deckkraft des Elements in 0,2 Sekunden auf 1,0 geändert. | Beispiel |
Rückrufoptionen
Darüber hinaus können Sie im Optionsparameter eine der folgenden Rückruffunktionen verwenden:
| Funktion | Beschreibung | Beispiele |
|---|---|---|
| am Start | Wird aufgerufen, wenn ein Ziehen eingeleitet wird. | Beispiel |
| onDrag | Wird wiederholt aufgerufen, wenn sich eine Maus bewegt, wenn sich die Mausposition gegenüber dem vorherigen Anruf ändert. | Beispiel |
| Veränderung | Wird genauso wie onDrag aufgerufen (dies ist der bevorzugte Rückruf). | Beispiel |
| am Ende | Wird aufgerufen, wenn ein Drag beendet wird. | Beispiel |
Mit Ausnahme des Rückrufs "Ändern" akzeptiert jeder dieser Rückrufe zwei Parameter: das Draggable-Objekt und das Mausereignisobjekt.
Beispiel zum Ziehen
Hier definieren wir 5 Elemente, die ziehbar gemacht werden: drei <div> -Elemente, ein <img> -Element und ein <span> -Element. Der Zweck der drei verschiedenen <div> -Elemente besteht darin, zu demonstrieren, dass das Ziehverhalten unabhängig davon, ob ein Element mit einer Positionierungsregel von statisch (Standard), relativ oder absolut beginnt, nicht beeinflusst wird.
<html>
<head>
<title>Draggables Elements</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
<script type = "text/javascript">
// Take all the elements whatever you want to make Draggable.
var elements = ['normaldiv', 'relativediv', 'absolutediv', 'image', 'span'];
// Make all the items drag able by creating Draggable objects
window.onload = function() {
elements.each(function(item) { new Draggable(item, {});});
}
</script>
</head>
<body>
<div id = "normaldiv">
This is a normal div and this is dragable.
</div>
<div id = "relativediv" style="position: relative;">
This is a relative div and this is dragable.
</div>
<div id = "absolutediv" style="position: absolute;">
This is an absolute div and this dragable.
</div>
<br />
<img id = "image" src = "/images/scriptaculous.gif"/>
<p>Let part <span id = "span" style = "color: blue;">
This is middle part</span> Yes, only middle part is dragable.</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Ziehen von gezogenen Dingen
Ein Element wird durch einen Aufruf der add () -Methode in einem Namespace namens Droppables in ein Drop-Ziel konvertiert .
Der Droppables-Namespace verfügt über zwei wichtige Methoden: add () zum Erstellen eines Drop-Ziels und remove () zum Entfernen eines Drop-Ziels.
Syntax
Hier ist die Syntax der add () -Methode zum Erstellen eines Drop-Ziels. Die add () -Methode erstellt ein Drop-Ziel aus dem als ersten Parameter übergebenen Element, wobei die Optionen im als zweiten übergebenen Hash verwendet werden.
Droppables.add( element, options );Die Syntax für remove () ist noch einfacher. Die remove () -Methode entfernt das Drop-Target-Verhalten aus dem übergebenen Element.
Droppables.remove(element);Optionen
Sie können eine oder mehrere der folgenden Optionen verwenden, während Sie Ihr ziehbares Objekt erstellen.
| Möglichkeit | Beschreibung | Beispiele |
|---|---|---|
| Schwebeklasse | Der Name einer CSS-Klasse, die dem Element hinzugefügt wird, während das Droppable aktiv ist (über dem ein akzeptables Draggable schwebt). Der Standardwert ist null. | Beispiel |
| Akzeptieren | Eine Zeichenfolge oder ein Array von Zeichenfolgen, die CSS-Klassen beschreiben. Das Droppable akzeptiert nur Draggables, die eine oder mehrere dieser CSS-Klassen haben. | Beispiel |
| Eindämmung | Gibt ein Element oder ein Array von Elementen an, das ein übergeordnetes Element eines ziehbaren Elements sein muss, damit es vom Ablageziel akzeptiert wird. Standardmäßig werden keine Containment-Einschränkungen angewendet. | Beispiel |
| Überlappung | Bei Einstellung auf "horizontal" oder "vertikal" reagiert das Droppable nur dann auf ein Draggable, wenn es sich in der angegebenen Richtung um mehr als 50% überlappt. Wird von Sortables verwendet, wird im nächsten Kapitel erläutert. | |
| gierig | Wenn true (Standardeinstellung), werden keine schwebenden Dateien mehr angezeigt. Unter der Drag-Datei wird nicht gesucht. | Beispiel |
Rückrufoptionen
Darüber hinaus können Sie im Optionsparameter eine der folgenden Rückruffunktionen verwenden:
| Funktion | Beschreibung | Beispiele |
|---|---|---|
| onHover | Gibt eine Rückruffunktion an, die aktiviert wird, wenn ein geeignetes ziehbares Element über dem Ablageziel schwebt. Wird von Sortables verwendet, wird im nächsten Kapitel erläutert. | |
| onDrop | Gibt eine Rückruffunktion an, die aufgerufen wird, wenn ein geeignetes ziehbares Element auf das Ablageziel gelegt wird. | Beispiel |
Beispiel
Hier ähnelt der erste Teil dieses Beispiels unserem vorherigen Beispiel, außer dass wir die praktische Funktion $ A () von Prototype verwendet haben, um eine Knotenliste aller <img> -Elemente im Element mit der ID von Draggables in ein Array zu konvertieren .
<html>
<head>
<title>Drag and Drop Example</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
<script type = "text/javascript">
window.onload = function() {
// Make all the images draggables from draggables division.
$A($('draggables').getElementsByTagName('img')).each(function(item) { new Draggable(item, {revert: true, ghosting: true}); }); Droppables.add('droparea', {hoverclass: 'hoverActive', onDrop: moveItem}); // Set drop area by default non cleared. $('droparea').cleared = false;
}
// The target drop area contains a snippet of instructional
// text that we want to remove when the first item
// is dropped into it.
function moveItem( draggable,droparea){
if (!droparea.cleared) {
droparea.innerHTML = '';
droparea.cleared = true;
}
draggable.parentNode.removeChild(draggable);
droparea.appendChild(draggable);
}
</script>
<style type = "text/css">
#draggables {
width: 172px;
border: 3px ridge blue;
float: left;
padding: 9px;
}
#droparea {
float: left;
margin-left: 16px;
width: 172px;
border: 3px ridge maroon;
text-align: center;
font-size: 24px;
padding: 9px;
float: left;
}
.hoverActive {
background-color: #ffffcc;
}
#draggables img, #droparea img {
margin: 4px;
border:1px solid red;
}
</style>
</head>
<body>
<div id = "draggables">
<img src = "/images/html.gif"/>
<img src = "/images/css.gif"/>
<img src = "/images/xhtml.gif"/>
<img src = "/images/wml_logo.gif"/>
<img src = "/images/javascript.gif"/>
</div>
<div id = "droparea">
Drag and Drop Your Images in this area
</div>
</body>
</html>Dies führt zu folgendem Ergebnis: