HTML学习笔记(六) 元素拖放

在 HTML5 中，任何元素都能够被拖放

要使得一个元素是可拖动的，必须将它的 draggable 属性设置为 true

div draggable="true">
    我是可以被拖动的/div>
    

在拖动元素的过程中，会触发相关的事件，与源对象（被拖动元素）相关的事件如下：

• ondragstart：开始拖动元素时触发
• ondrag：元素正在拖动时触发
• ondragend：完成元素拖动后触发

!DOCTYPE html>
    
html>
    
head>
    
    title>
    Drag Demo/title>
    
    head>
    
        style>

            #source-object {
    
                width: 50px;
    
                height: 50px;
    
                border: 1px solid red;
    
                background-color: red;

            }
    
        /style>
    
        script>

            function dragstart(event) {
 console.log('dragstart') }

            function drag(event) {
 console.log('drag') }

            function dragend(event) {
 console.log('dragend') }
    
        /script>
    
    /head>
    
/head>
    
body>
    
    div id="source-object"
         draggable="true"
         ondragstart="dragstart(event)"
         ondrag="drag(event)"
         ondragend="dragend(event)" >
    
    /div>
    
/body>
    
/html>
    

另外，我们还能监听在元素释放时触发的事件，与目标对象（其实就是释放区域）相关的事件如下：

• ondragenter：当被拖动元素进入释放区域时触发
• ondragover  ：当被拖动元素在释放区域移动时触发
• ondragleave：当被拖动元素离开释放区域时触发
• ondrop：当被拖动元素在释放区域释放时触发

!DOCTYPE html>
    
html>
    
head>
    
    title>
    Drop Demo/title>
    
    head>
    
        style>

            #source-object {
    
                width: 50px;
    
                height: 50px;
    
                border: 1px solid red;
    
                background-color: red;

            }

            #target-object {
    
                width: 100px;
    
                height: 100px;
    
                border: 1px solid blue;
    
                background-color: blue;

            }
    
        /style>
    
        script>

            function dragenter(event) {
 console.log('dragenter') }

            function dragover(event) {

                // dragover 事件的默认行为是阻止数据或元素放置到其他元素中
                // 如果想要避免这种情况，就必须阻止 dragover 的默认行为
                // 只有这样，才能触发 drop 事件
                event.preventDefault()
                console.log('dragover')
            }

            function dragleave(event) {
 console.log('dragleave') }

            function drop(event) {

                // 对于图片等元素，drop 事件的默认行为是以链接的形式打开
                // 如果想要避免这种情况，就必须阻止 drop 的默认行为
                event.preventDefault()
                console.log('drop')
            }
    
        /script>
    
    /head>
    
/head>
    
body>
    
    div>
    请将红色方框移入蓝色方框/div>
    
    br />
    
    div id="source-object" draggable="true">
    /div>
    
    br />
    
    div id="target-object"
         ondragenter="dragenter(event)"
         ondragover="dragover(event)"
         ondragleave="dragleave(event)"
         ondrop="drop(event)" >
    
    /div>
    
/body>
    
/html>
    

拖放事件还有一个新的属性 dataTransfer，用于在源对象和目标对象之间传递数据

dataTransfer 它是一个对象，常用的方法有两个：

• setData(key, value)：在源对象设置数据
• getData(key)：在目标对象获取数据

!DOCTYPE html>
    
html>
    
head>
    
    title>
    Drag And Drop Demo/title>
    
    head>
    
        style>

            #source-object {
    
                width: 50px;
    
                height: 50px;
    
                border: 1px solid red;
    
                background-color: red;

            }

            #target-object {
    
                width: 100px;
    
                height: 100px;
    
                border: 1px solid blue;
    
                background-color: blue;

            }
    
        /style>
    
        script>

            // 源对象事件
            function dragstart(event) {

                event.dataTransfer.setData('elemId', event.target.id)
            }

            // 目标对象事件
            function dragover(event) {

                event.preventDefault()
            }

            function drop(event) {

                event.preventDefault()
                var elemId = event.dataTransfer.getData('elemId')
                var elem = document.getElementById(elemId)
                event.target.appendChild(elem)
            }
    
        /script>
    
    /head>
    
/head>
    
body>
    
    div>
    请将红色方框移入蓝色方框/div>
    
    br />
    
    div id="source-object"
         draggable="true"
         ondragstart="dragstart(event)" >
    
    /div>
    
    br />
    
    div id="target-object"
         ondragover="dragover(event)"
         ondrop="drop(event)">
    
    /div>
    
/body>
    
/html>
    

最后来一个拖放在实际应用中的例子，实现文件拖拽上传功能

!DOCTYPE html>
    
html>
    
head>
    
    title>
    Drag And Drop Demo/title>
    
    head>
    
        style>

            #file-input {
    
                width: 300px;
    
                height: 100px;
    
                border-radius: 50px;
    
                border: 1px dashed black;
    
                display: flex;
    
                flex-direction: row;
    
                justify-content: center;
    
                align-items: center;

            }
    
        /style>
    
        script>

            window.onload = function() {

                var fileInput = document.getElementById('file-input')
                fileInput.ondragover = function(event) {

                    event.preventDefault()
                }

                fileInput.ondrop = function(event) {
    
                    event.preventDefault()
                    // 每次只获取第一个文件对象
                    var file = event.dataTransfer.files[0]
                    // 检查
                    let isRightType = checkFileType(file)
                    let isRightSize = checkFileSize(file)
                    // 提示
                    if (isRightType &
    &
 isRightSize) {

                        alert('上传文件成功')
                    }
 else if (!isRightType) {

                        alert('只支持 DOCX、TXT、MD 文件格式')
                    }
 else if (!isRightSize) {

                        alert('文件不能大于 2 M')
                    }

                }

                function checkFileType(file) {

                    let allowedTypes = ['DOCX', 'TXT', 'MD']
                    let fileInfo = file.name.split('.')
                    let fileType = fileInfo[fileInfo.length - 1].toUpperCase()
                    return allowedTypes.includes(fileType)
                }

                function checkFileSize(file) {

                    let maxSize = 2 * 1024 * 1024
                    let fileSize = file.size
                    return fileSize = maxSize
                }

            }
    
        /script>
    
    /head>
    
/head>
    
body>
    
    div id="file-input">
    请将文件拖动到此处/div>
    
/body>
    
/html>
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！