我要招人

去企业版

首页 > 试题广场 >

js拖拽功能的实现

[问答题]

请你谈一下对于js拖拽功能的实现的理解，具体的实现方式是什么？

绿皮兔子


	思路：



	鼠标按下时，纪录一下鼠标位置距离移动元素的边的距离。



	鼠标移动时，实时更新元素位置（具体计算以垂直方向为例：



	    鼠标距离浏览器垂直方向距离，减去刚刚纪录的鼠标距离元素的垂直方向距离，



	    就是元素定位top属性的值）



	鼠标松开时，完成元素位移。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 300px;
            height: 200px;
            background-color: pink;
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
<div></div>
<script>
    var divEle = document.getElementsByTagName('div')[0]
    var mouse = {
        mouseLock:false,
        mouseEleClient:{
            t:0,
            l:0
        }
    }
    divEle.onmousedown = function(e){ //当鼠标在divEle按下时触发事件
        e = e || window.event
        var l = e.clientX
        var t = e.clientY
        mouse.mouseEleClient.t =t - this.offsetTop
        mouse.mouseEleClient.l =l - this.offsetLeft
        mouse.mouseLock = true
    }
    divEle.onmouseup = function(e){//当鼠标松开时触发事件
        mouse.mouseLock = false
    }
    window.onmousemove = function (e) { //当鼠标移动时持续触发
        if(mouse.mouseLock){
            e = e || window.event
            var l = e.clientX
            var t = e.clientY
            var divT = t - mouse.mouseEleClient.t
            var divL = l - mouse.mouseEleClient.l
            divEle.style.top = divT+'px'
            divEle.style.left = divL+'px'
        }
    }
</script>
</body>
</html>

编辑于 2019-03-21 15:21:33 回复(1)

牛客958379号

h5 新增了 drag api

其实原理

mousedown mouseenter mouseup mousemove

楼上也写了。

mousedown 获取被选中的元素

mousemove 元素位置随事件位置改变

mouseup 判断是否停止移动

mouseenter 拿到最后 enter 的元素，把目标放置进去。

发表于 2019-04-16 22:58:13 回复(0)

pbgf

var flag=0;//标志该元素是否进入拖拽状态

var divLeft = 0;

var divTop = 0;

var target = document.querySelector('.div')

var parent= document.querySelector('#parent')

function getElementLeft(element){

var actualLeft=element.offsetLeft;

var current = element.offsetParent;

while(current!=null){

actualLeft+=current.offsetLeft;

current=current.offsetParent

}

return actualLeft

}

function getElementTop(element){

var actualTop=element.offsetTop;

var current = element.offsetParent;

while(current!=null){

actualTop+=current.offsetTop;

current=current.offsetParent

}

return actualTop

}

target.onmousedown=function(e){

flag=1;

divLeft=e.pageX-getElementLeft(target)

divTop=e.pageY-getElementTop(target)

}

target.onmousemove=function(e){

if(flag){
let x=e.pageX-divLeft-getElementLeft(parent);

let y=e.pageY-divTop-getElementTop(parent);

target.style.left=x.toString()+"px";

target.style.top=y.toString()+"px";}

}

target.onmousedown=function(e){

flag=0;

}

发表于 2019-01-30 14:28:04 回复(0)

牛客48304530号

拖拽分 PC端和移动端 PC端 mousedown mouseup mousedown 和mouseup 的事件对象不是同一个在 mousedown 获取对象的offset =x 并将x 赋值给 mouseup 的事件对象 mouseup 事件对象的offset = y 并将y的坐标赋值给 mousedown 的对象如此两个对象交换坐标。。然后再off(mouseup）。这样可以实现拖拽以及被覆盖目标两个坐标互换。里面嵌套 mouseup

发表于 2019-01-29 15:31:37 回复(0)

提交观点

问题信息

前端工程师 Javascript

上传者：小小

难度：

4条回答 26收藏 2207浏览

js拖拽功能的实现

问题信息

热门推荐

相关试题