Ondragstart event in HTML5 that is triggered when the user starts dragging an element or selected text-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

Ondragstart event in HTML5 that is triggered when the user starts dragging an element or selected text

黄舟

Nov 06, 2017 pm 02:08 PM

h5 html5 element

Example

Executed when the user starts dragging the

elementJavaScript :

<p draggable="true" ondragstart="myFunction(event)">拖动我!</p>

Copy after login

Definition and usage

ondragstart Event Fired when the user starts dragging an element or selected text.

Drag and drop is a very common feature in HTML5. For more information, check out HTML5 Drag and Drop in our HTML tutorial.

Note: To make an element draggable, you need to use the HTML5 draggable attribute.

Tip: Links and images are draggable by default and do not require the draggable attribute.

The following events will be triggered during the drag and drop process:

Trigger events on the drag target (source element):
ondragstart - Fires when the user starts dragging the element
ondrag - Fires when the element is being dragged
##ondragend - The user completes dragging the element Triggered after moving

Events triggered when the target is released:

ondragenter - triggered when the object dragged by the mouse enters its container range This event
ondragover - This event is triggered when a dragged object is dragged within the scope of another object container
ondragleave - This event is triggered when the object being dragged by the mouse leaves the scope of its container
ondrop - This event is triggered when the mouse button is released during a dragging process

Syntax

HTML:

<element ondragstart="myScript">

Copy after login

JavaScript:

object.ondragstart=function(){myScript};

Copy after login

In JavaScript, use the addEventListener() method:

object.addEventListener("dragstart", myScript);

Copy after login

Note : Internet Explorer 8 and earlier IE versions do not support the addEventListener() method.

Technical details

Whether bubbling is supported:YesCan be canceled :YesEvent type:DragEventSupported HTML tags:All HTML elements

更多实例

实例

以下实例演示了所有的拖放事件：

/* 拖动时触发*/
document.addEventListener("dragstart", function(event) {
    //dataTransfer.setData()方法设置数据类型和拖动的数据
    event.dataTransfer.setData("Text", event.target.id);
    // 拖动 p 元素时输出一些文本
    document.getElementById("demo").innerHTML = "开始拖动 p 元素."; 
    //修改拖动元素的透明度
    event.target.style.opacity = "0.4";
});
//在拖动p元素的同时,改变输出文本的颜色
document.addEventListener("drag", function(event) {
    document.getElementById("demo").style.color = "red";
});
// 当拖完p元素输出一些文本元素和重置透明度
document.addEventListener("dragend", function(event) {
    document.getElementById("demo").innerHTML = "完成 p 元素的拖动";
    event.target.style.opacity = "1";
});
/* 拖动完成后触发 */
// 当p元素完成拖动进入droptarget,改变div的边框样式
document.addEventListener("dragenter", function(event) {
    if ( event.target.className == "droptarget" ) {
        event.target.style.border = "3px dotted red";
    }
});
// 默认情况下,数据/元素不能在其他元素中被拖放。对于drop我们必须防止元素的默认处理
document.addEventListener("dragover", function(event) {
    event.preventDefault();
});
// 当可拖放的p元素离开droptarget，重置div的边框样式
document.addEventListener("dragleave", function(event) {
    if ( event.target.className == "droptarget" ) {
        event.target.style.border = "";
    }
});
/*对于drop,防止浏览器的默认处理数据(在drop中链接是默认打开)
复位输出文本的颜色和DIV的边框颜色
利用dataTransfer.getData()方法获得拖放数据
拖拖的数据元素id("drag1")
拖拽元素附加到drop元素*/
document.addEventListener("drop", function(event) {
    event.preventDefault();
    if ( event.target.className == "droptarget" ) {
        document.getElementById("demo").style.color = "";
        event.target.style.border = "";
        var data = event.dataTransfer.getData("Text");
        event.target.appendChild(document.getElementById(data));
    }
});

Copy after login

The above is the detailed content of Ondragstart event in HTML5 that is triggered when the user starts dragging an element or selected text. 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