search

Home  >  Article  >  Web Front-end  >  Implementation of HTML5 drag-and-drop copy function

Implementation of HTML5 drag-and-drop copy function

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

Drag and drop is a common feature, that is, grabbing an object and dragging it to another location. In HTML5, dragging is part of the standard and any element can be dragged. Html5 drag and drop is a very common function, but most drag and drop cases are a cutting process. The project needs to implement the Html5 drag and drop copy function. Html5 drag and drop copy is very simple. You only need to use ordinary Html5 drag and drop. Just make a few small changes along the way.

ps: This blog post is not a homepage article, just a simple note.

Browser support

  1. Internet Explorer 9

  2. Firefox

  3. Opera 12

  4. Chrome

  5. Safari 5

v1.0 code part

<!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>

Code analysis

The implementation idea is to clone the dragged element, and then appendChild() the cloned element to the specified location

Implement Html5 The core code of drag-and-drop copy.cloneNode()

After Html5 drag-and-drop copy is completed, there are actually many things that can be completed after appendChild() is executed. This depends on the specific needs

If it is just If you want to implement traditional HTML5 drag and drop, remove var item = document.getElementById(data).cloneNode();, and then ev.target.appendChild(data);

Through this article, I hope you can This helps everyone, thank you for your support of this site!

For more articles related to the implementation of HTML5 drag-and-drop copy function, please pay attention to the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Previewable multi-image Ajax upload based on HTML5Next article：Previewable multi-image Ajax upload based on HTML5

Related articles

See more