Inhaltsverzeichnis
Die Anleitung zu Javascript DragEvent
View more Tutorials:
Folge uns auf unserer fanpage, um jedes Mal benachrichtigt zu werden, wenn es neue Artikel gibt.
Facebook
DragEvent ist eine Interface für die Vertretung der Events, die in dem Ziehen und Ablegen-Prozess (drag & drop) eines Objekt von einem Ort zu einem anderen Ort passieren. Der Benutzer leitet einen Ziehen (drag) durch die Setzung des Zeiger Gerät (pointer device) (wie den Maus) auf die Fläche eines Objekt, herabdrücken (press down),und die Bewegung des Zeiger Gerät in einem anderen Ort ein und dann befreit das Zeiger Gerät um das Objekt in den neuen Ort abzulegen (drop) .
DragEvent eine Sub-Interface von MouseEvent, deshalb erbt es alle Properties und Method von MouseEvent.
Unten ist die Liste der Events, die während des Ziehen und Ablegen passieren werden.
| Event | Element Type | Description |
|---|---|---|
| dragstart | Dragged Element | Das Event passiert wenn der Benutzer ein Element zu ziehen startet. |
| drag | Das Event passiert wenn ein Element gezogen wird. | |
| dragend | Das Event passiert wenn der Benutzer das Ziehen des Element erledigt. | |
| dragenter | Drop Target | Das Event passiert wenn das gezogene Element in dem Ziel-Ablegen (drop target) eintritt. |
| dragover | Das Event passiert wenn das gezogene Element über das Ziel-Ablegen ist (over). | |
| dragleave | Das Event passiert wenn das gezogene Element aus dem Ziel-Ablegen austritt. | |
| drop | Das Event passiert wenn das gezogene Element in dem Ziel-Ablegen abgelegt wird. | |
Die Illustration von Events während des Ziehen und Ablegen (drag drop).
| Property | Die Bezeichnung |
|---|---|
| dataTransfer | Die Daten zurückgeben, die gezogen/abgelegt werden |
Ein einfaches Beispiel sehen
dragevents-example.html
<!DOCTYPE html>
<html>
<head>
<title>DragEvent Example</title>
<script src="dragevents-example.js"></script>
<style>
.droptarget-div {
float: left;
width: 100px;
height: 55px;
margin: 25px 25px 5px 5px;
padding: 10px;
border: 1px solid black;
}
#dragtarget-div {
background: #eee;
padding: 5px;
}
</style>
</head>
<body>
<h3>DragEvent example</h3>
<p id="log-div">..</p>
<!-- Drop Target 1 -->
<div class="droptarget-div"
ondragenter= "ondragenterHandler(event)"
ondragover="dragoverHandler(event)"
ondrop="dropHandler(event)">
<p id="dragtarget-div"
ondragstart="dragstartHandler(event)"
ondrag="dragHandler(event)"
draggable="true">
Drag me!
</p>
</div>
<!-- Drop Target 2 -->
<div class="droptarget-div"
ondragenter= "ondragenterHandler(event)"
ondragover="dragoverHandler(event)"
ondrop="dropHandler(event)">
</div>
</body>
</html>
dragevents-example.js
// --------- Handlers for 'Dragged Element' ------------------
function dragstartHandler(evt) {
evt.dataTransfer.setData("MyDraggedElementId", evt.target.id);
}
// dragging ...
function dragHandler(evt) {
showLog("The p element is being dragged");
}
// --------- Handlers for 'Drop Target' ------------------
function ondragenterHandler() {
showLog("The p element enter drop-target");
}
// When 'over' you can 'release mouse' to 'drop'.
function dragoverHandler(evt) {
evt.preventDefault(); // Important!!
}
function dropHandler(evt) {
evt.preventDefault(); // Important!!
var elementId = evt.dataTransfer.getData("MyDraggedElementId");
evt.target.appendChild(document.getElementById(elementId));
showLog("The p element was dropped");
}
// -------------------------------------------------------
function showLog(text) {
document.getElementById("log-div").innerHTML = text;
}
-
Zum Beispiel, der Bennutzer zieht die Files in seinem Computer und legt ein Element <div> ab, Sie können die grundlegenden Informationen und Inhalte der durch den Benutzer gezogenen Files.
Wenn das Event drop passiert, gibt event.dataTransfer.files ein Objekt FileList zurück. Das Objekt enthaltet die Liste der Objekte File.
drop-files-example.html
<!DOCTYPE html>
<html>
<head>
<title>DragEvent Example</title>
<meta charset="UTF-8">
<script src="drop-files-example.js"></script>
<style>
#drop-area {
border: 1px solid blue;
padding: 15px;
}
</style>
</head>
<body>
<h3>Drop files example</h3>
<div id="drop-area" ondragover="dragoverHandler(event)" ondrop="dropHandler(event)">
Drop files here
</div>
<output id="log-div"></output>
</body>
</html>
drop-files-example.js
function dropHandler(evt) {
evt.stopPropagation();
evt.preventDefault();
// FileList object.
var files = evt.dataTransfer.files;
// files is a FileList of File objects. List some properties.
var output = [];
for (var i = 0, f; f = files[i]; i++) {
output.push('<li><strong>', escape(f.name), //
'</strong> (', f.type || 'n/a', ') - ', //
f.size, ' bytes, last modified: ',
f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
'</li>');
}
document.getElementById('log-div').innerHTML = '<ul>' + output.join('') + '</ul>';
}
function dragoverHandler(evt) {
evt.stopPropagation();
evt.preventDefault();
// Explicitly show this is a copy.
evt.dataTransfer.dropEffect = 'copy';
}
*
