Implementation of HTML5 drag-and-drop copy function-H5 Tutorial-php.cn

Implementation of HTML5 drag-and-drop copy function

高洛峰

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

Original

2244 people have browsed it

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

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

Copy after login

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!