Share an example code for implementing drag-and-drop in HTML5-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

Share an example code for implementing drag-and-drop in HTML5

零下一度

May 04, 2017 pm 03:36 PM

html5

In html5, drag and drop is supported API Interface. Through this function, data can be dragged and dropped between the browser and other applications. To achieve this operation, you must go through the following two steps
(1) Set the draggable attribute of the object you want to drag and drop to true. In this way, the tag can be dragged and dropped. In addition, the img tag and a tag must be specified as true, and drag and drop is allowed by default. (2) Write the
event processing code related to drag and drop. Commonly used playback events are as follows: dragstart starts the drag and drop operation
drag During the drag and drop process
dragenter is The dragged and dropped label begins to enter the scope of this label
dragover The dragged and dropped label is moving within the scope of this label
dragleave The dragged and dropped label leaves the scope of this label
drop There are other labels being dragged Put it in this tag
dragend The drag-and-drop operation ends

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>拖放</title>
<script type="text/javascript">
function init() 
{
    // (1) 拖放开始
    source.addEventListener("dragstart", function(ev) 
    {
       //(1) 向dataTransfer对象追加数据
        var dt = ev.dataTransfer;
        dt.effectAllowed = &#39;all&#39;;    
       //(2) 拖动元素为dt.setData("text/plain", this.id); 
        dt.setData("text/plain", "你好"); 
    }, false);
      // (3) dragend：拖放结束
    dest.addEventListener("dragend", function(ev) 
    {
        //不执行默认处理（拒绝被拖放）
        ev.preventDefault();
     }, false);
    // (4) drop:被拖放
    dest.addEventListener("drop", function(ev) 
    {
        // 从DataTransfer对象那里取得数据
        var dt = ev.dataTransfer;
        //(5) 不执行默认处理（拒绝被拖放）
        ev.preventDefault();
        //停止事件传播
        ev.stopPropagation();
    }, false);
}
</script>
</head>
<body onload="init()">
<h5>请拖放</h5>
</html>

Copy after login

In the above code, the inint() event is automatically triggered when the page is loaded. This event includes three functions: start dragging, being dragged and dropped, and ending dragging. Open the webpage in the browser, drag the mouse to display the evening pictures on the webpage, and the webpage will automatically load the required content.

【Related recommendations】

Free h5 online video tutorial

HTML5 full version manual

php.cn original html5 video tutorial

The above is the detailed content of Share an example code for implementing drag-and-drop in HTML5. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

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