codestory

Die Anleitung zu Javascript DragEvent

View more Tutorials:

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.
EventElement TypeDescription
dragstartDragged ElementDas Event passiert wenn der Benutzer ein Element zu ziehen startet.
dragDas Event passiert wenn ein Element gezogen wird.
dragendDas Event passiert wenn der Benutzer das Ziehen des Element erledigt.

dragenterDrop TargetDas Event passiert wenn das gezogene Element in dem Ziel-Ablegen (drop target) eintritt.
dragoverDas Event passiert wenn das gezogene Element über das Ziel-Ablegen ist (over).
dragleaveDas Event passiert wenn das gezogene Element aus dem Ziel-Ablegen austritt.
dropDas Event passiert wenn das gezogene Element in dem Ziel-Ablegen abgelegt wird.
Die Illustration von Events während des Ziehen und Ablegen (drag drop).
 
PropertyDie Bezeichnung
dataTransferDie 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';
}
 

View more Tutorials:

Vielleicht bist du interessiert

Das sind die Online-Courses außer der Website o7planning, die wir empfehlen. Sie können umsonst sein oder Discount haben.