Implementierung der HTML5-Drag-and-Drop-Kopierfunktion-H5-Tutorial-php.cn

Implementierung der HTML5-Drag-and-Drop-Kopierfunktion

高洛峰

Freigeben： 2017-02-17 17:11:19

Original

2243 Leute haben es durchsucht

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

Internet Explorer 9
Firefox
Opera 12
Chrome
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>

Nach dem Login kopieren

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!