Die Anleitung zu Javascript DragEvent

DragEvent

1. DragEvent

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	Dragged Element	Das Event passiert wenn ein Element gezogen wird.
dragend	Dragged Element	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	Drop Target	Das Event passiert wenn das gezogene Element über das Ziel-Ablegen ist (over).
dragleave	Drop Target	Das Event passiert wenn das gezogene Element aus dem Ziel-Ablegen austritt.
drop	Drop Target	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';
}

https://developer.mozilla.org/en-US/docs/Web/API/File

Die Anleitung zu Javascript DragEvent

1. DragEvent

Anleitungen ECMAScript, Javascript

Anleitungen ECMAScript, Javascript

Neueste Artikel