Fe-interview: [js] 第157天举例说明js拖拽用到的事件有哪些？

Created on 19 Sep 2019 · 4Comments · Source: haizlin/fe-interview

第157天举例说明js拖拽用到的事件有哪些？

Source

haizhilin2013

Most helpful comment

传统方式
- PC：mousedonw``mousemove``mouseup
- 移动端：touchstart``touchmove``touchend
- 原理：通过计算坐标的方式来实现元素的可视化移动。
HTML5原生拖拽
- dragstart``drag``dragenter``dragover``dragleave``drop``dragend
- 原理：通过对被拖动元素和拖动目标元素进行事件监听，实现拖动效果
区别
- 传统方式是实现元素的实时移动，HTML5原生拖拽事件是体现元素的拖拽结果，需要确定拖拽的目标区域，如应用于拖拽上传。

demo

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            .tra {
                width: 70px;
                height: 70px;
                position: fixed;
                background: red;
            }

            .drag {
                width: 80px;
                height: 80px;
                background: blueviolet;
            }

            #dragTarget {
                width: 200px;
                height: 200px;
                border: 1px solid;
            }
        </style>
    </head>

    <body>
        <!-- HTML Draggable -->
        <div class="drag" id="drag" draggable="true"></div>

        <div id="dragTarget"></div>
        <!-- 传统的拖拽 -->
        <div id="tra" class="tra">
        </div>


        <script>
            // 传统的拖拽
            ; (function () {
                var tra = document.querySelector('#tra');
                var startPoint = Object.create(null);
                var isStartMove = false;
                const addUnit = num => num + 'px';
                tra.addEventListener('mousedown', e => {
                    isStartMove = true;
                    startPoint = {
                        x: e.offsetX,
                        y: e.offsetY,
                    }
                });
                window.addEventListener('mousemove', e => {
                    if (!isStartMove) return;
                    tra.style.left = addUnit(e.clientX - startPoint.x);
                    tra.style.top = addUnit(e.clientY - startPoint.y);
                });
                window.addEventListener('mouseup', e => {
                    isStartMove = false;
                    startPoint = {
                        x: 0,
                        y: 0,
                    }
                });
            })();

            // HTML5拖拽事件
            ;(function() {
                var dragEl = document.querySelector('#drag');
                dragEl.addEventListener('dragstart', e => {
                    e.dataTransfer.setData("Text",e.target.id);
                    e.dataTransfer.effectAllowed = 'copyMove';
                });

                var dragTargetEl = document.querySelector('#dragTarget');
                dragTargetEl.addEventListener('dragenter', e => {
                    e.preventDefault();
                });

                dragTargetEl.addEventListener('dragover', e => {
                    e.preventDefault();
                });

                dragTargetEl.addEventListener('drop', e => {
                    e.preventDefault();
                    var id = e.dataTransfer.getData('Text');
                    e.target.appendChild(document.getElementById(id));
                })
            })();


        </script>
    </body>

    </html>

vkboo on 20 Sep 2019

👍2 ❤1

All 4 comments

鼠标按下事件 onmousedown

function onMouseDown(event){

    if (event.button == 0) {

         console.log("鼠标左键!")

     }else if (event.button == 2){

         console.log("鼠标右键!");

     }else if(event.button == 1){

         console.log("鼠标滚轮!");

     }
}

鼠标移动事件 onmousemove
鼠标抬起时间 onmouseup

HuoXiaoYe on 20 Sep 2019

ondragstart/ondrop/ondragover

veWangCorn on 20 Sep 2019

👍3

PC端: ondragstart/ondrop/ondragover
手机端: touchstart/touchmove/touchend

klren0312 on 20 Sep 2019

传统方式
- PC：mousedonw``mousemove``mouseup
- 移动端：touchstart``touchmove``touchend
- 原理：通过计算坐标的方式来实现元素的可视化移动。
HTML5原生拖拽
- dragstart``drag``dragenter``dragover``dragleave``drop``dragend
- 原理：通过对被拖动元素和拖动目标元素进行事件监听，实现拖动效果
区别
- 传统方式是实现元素的实时移动，HTML5原生拖拽事件是体现元素的拖拽结果，需要确定拖拽的目标区域，如应用于拖拽上传。

demo

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            .tra {
                width: 70px;
                height: 70px;
                position: fixed;
                background: red;
            }

            .drag {
                width: 80px;
                height: 80px;
                background: blueviolet;
            }

            #dragTarget {
                width: 200px;
                height: 200px;
                border: 1px solid;
            }
        </style>
    </head>

    <body>
        <!-- HTML Draggable -->
        <div class="drag" id="drag" draggable="true"></div>

        <div id="dragTarget"></div>
        <!-- 传统的拖拽 -->
        <div id="tra" class="tra">
        </div>


        <script>
            // 传统的拖拽
            ; (function () {
                var tra = document.querySelector('#tra');
                var startPoint = Object.create(null);
                var isStartMove = false;
                const addUnit = num => num + 'px';
                tra.addEventListener('mousedown', e => {
                    isStartMove = true;
                    startPoint = {
                        x: e.offsetX,
                        y: e.offsetY,
                    }
                });
                window.addEventListener('mousemove', e => {
                    if (!isStartMove) return;
                    tra.style.left = addUnit(e.clientX - startPoint.x);
                    tra.style.top = addUnit(e.clientY - startPoint.y);
                });
                window.addEventListener('mouseup', e => {
                    isStartMove = false;
                    startPoint = {
                        x: 0,
                        y: 0,
                    }
                });
            })();

            // HTML5拖拽事件
            ;(function() {
                var dragEl = document.querySelector('#drag');
                dragEl.addEventListener('dragstart', e => {
                    e.dataTransfer.setData("Text",e.target.id);
                    e.dataTransfer.effectAllowed = 'copyMove';
                });

                var dragTargetEl = document.querySelector('#dragTarget');
                dragTargetEl.addEventListener('dragenter', e => {
                    e.preventDefault();
                });

                dragTargetEl.addEventListener('dragover', e => {
                    e.preventDefault();
                });

                dragTargetEl.addEventListener('drop', e => {
                    e.preventDefault();
                    var id = e.dataTransfer.getData('Text');
                    e.target.appendChild(document.getElementById(id));
                })
            })();


        </script>
    </body>

    </html>

vkboo on 20 Sep 2019

👍2 ❤1

Was this page helpful?

0 / 5 - 0 ratings

Related issues

[软技能] 第61天知道IPV6是什么吗？说说它和IPV4的区别是什么？

haizhilin2013 · 3Comments

[html] 第39天 title与h1、b与strong、i与em的区别分别是什么？

haizhilin2013 · 3Comments

[html] 第56天渐进式渲染是什么？

haizhilin2013 · 3Comments

[vue] 说说你对vue组件的设计原则的理解

haizhilin2013 · 3Comments

[vue] watch怎么深度监听对象变化

haizhilin2013 · 3Comments

Fe-interview: [js] 第157天 举例说明js拖拽用到的事件有哪些？

Most helpful comment

All 4 comments

Related issues

Fe-interview: [js] 第157天举例说明js拖拽用到的事件有哪些？