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

trafficstars

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

Sep 19 '19 20:09 haizhilin2013

鼠标按下事件 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

Sep 20 '19 02:09 HuoXiaoYe

ondragstart/ondrop/ondragover

Sep 20 '19 03:09 veWangCorn

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

Sep 20 '19 03:09 klren0312

传统方式
- 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>

Sep 20 '19 16:09 vkboo

dragstart/dragenter/drop

Jul 26 '22 09:07 xiaoqiangz

fe-interview fe-interview copied to clipboard

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

fe-interview
fe-interview copied to clipboard

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