suchen

Heim  >  Artikel  >  Web-Frontend  >  Implementierung der HTML5-Drag-and-Drop-Kopierfunktion

Implementierung der HTML5-Drag-and-Drop-Kopierfunktion

高洛峰
高洛峰Original
2017-02-17 17:11:192231Durchsuche

Drag & Drop ist eine gängige Funktion, bei der ein Objekt gegriffen und an einen anderen Ort gezogen wird. In HTML5 gehört das Ziehen zum Standard und jedes Element kann gezogen werden. HTML5-Drag-and-Drop ist eine sehr häufige Funktion, aber die meisten Drag-and-Drop-Fälle sind ein Schneidevorgang. Die Implementierung der HTML5-Drag-and-Drop-Kopierfunktion ist sehr einfach Nehmen Sie einfach per Drag-and-Drop ein paar kleine Änderungen vor.

ps: Dieser Blogbeitrag ist kein Homepage-Artikel, sondern nur eine einfache Notiz.

Browser-Unterstützung

  1. Internet Explorer 9

  2. Firefox

  3. Opera 12

  4. Chrome

  5. Safari 5

V1.0-Codeteil

<!DOCTYPE html>
<html>
<head>
  <styletype="text/css">
    #p1 {
      width: 700px;
      height: 120px;
      padding: 10px;
      border: 1px solid #aaaaaa;
    }
 
    #drag1 {
      cursor:pointer;
    }
  </style>
  <scripttype="text/javascript">
    function allowDrop(ev) {
      ev.preventDefault();
    }
 
    function drag(ev) {
 
      ev.dataTransfer.setData("Text", ev.target.id);
    }
 
    function drop(ev) {
      ev.preventDefault();
      var data = ev.dataTransfer.getData("Text");
      var item = document.getElementById(data).cloneNode();
      ev.target.appendChild(item);
    }
  </script>
</head>
<body>
  <p>请把 Windows Azure 的图片拖放到矩形中：</p>
  <pid="p1" ondrop="drop(event)" ondragover="allowDrop(event)"></p>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <imgid="drag1" src="http://www.cnblogs.com/images/cnblogs_com/toutou/699740/t_Azure.png" draggable="true" ondragstart="drag(event)"/>
</body>
</html>

Codeanalyse

Die Implementierungsidee besteht darin, das gezogene Element zu klonen und dann das geklonte Element mit appendChild() an den angegebenen Ort zu hängen

Der Kerncode zum Implementieren von HTML5-Drag-and-Drop-Kopie.cloneNode()

Nachdem das Html5-Drag-and-Drop-Kopieren abgeschlossen ist, können nach der Ausführung von appendChild() tatsächlich viele Dinge abgeschlossen werden spezifische Anforderungen

Wenn Sie nur herkömmliches HTML5-Drag & Drop implementieren möchten, entfernen Sie var item = document.getElementById(data).cloneNode(); und dann ev.target.appendChild(data); >

Geben Sie diesen Artikel weiter, ich hoffe, er hilft allen. Vielen Dank für Ihre Unterstützung dieser Website!

Weitere Artikel zur Implementierung der HTML5-Drag-and-Drop-Kopierfunktion finden Sie auf der chinesischen PHP-Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Vorschaufähiger Ajax-Upload mehrerer Bilder basierend auf HTML5Nächster Artikel：Vorschaufähiger Ajax-Upload mehrerer Bilder basierend auf HTML5

In Verbindung stehende Artikel

Mehr sehen