js实现元素拖拽

lufficc 发布于2019-08-20 15:08 / 2659人阅读

摘要：实现元素拖拽被移动元素必须为绝对定位待拖拽元素是否激活拖拽状态鼠标按下时相对于选中元素的位移监听鼠标按下事件激活拖拽状态鼠标按下时和选中元素的坐标偏移坐标鼠标按下时和选中元素的坐标偏移坐标监听鼠标放开事件监听鼠标移动事件

js实现元素拖拽

被移动元素必须为绝对定位

position:absolute;

Dom

Javasrtipt

var moveElem = document.querySelector(".move"); //待拖拽元素      

var dragging; //是否激活拖拽状态
var tLeft, tTop; //鼠标按下时相对于选中元素的位移

//监听鼠标按下事件
document.addEventListener("mousedown", function(e) {
    if (e.target == moveElem) {
        
        dragging = true; //激活拖拽状态
       var moveElemRect = moveElem.getBoundingClientRect();
        tLeft = e.clientX - moveElemRect.left; //鼠标按下时和选中元素的坐标偏移:x坐标
        tTop = e.clientY - moveElemRect.top; //鼠标按下时和选中元素的坐标偏移:y坐标
    }
});

//监听鼠标放开事件
document.addEventListener("mouseup", function(e) {
    dragging = false;
});

//监听鼠标移动事件
document.addEventListener("mousemove", function(e) {
    if (dragging) {
        var moveX = e.clientX - tLeft, 
              moveY = e.clientY - tTop;

        moveElem.style.left = moveX + "px";
        moveElem.style.top = moveY + "px";
      
    }
});

GPU云服务器云服务器元素拖拽 js 原理 js实现数据拖拽原生js实现拖拽 js实现数据的拖拽

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82018.html

JS进阶篇4---原生JS实现对元素的拖拽

摘要：原生实现对元素的拖拽一背景介绍此处为铺垫内容，可跳过随着前端的不断发展，各种各样的前端规范和新知识新技术层出不穷，极大地拓展了开发者的操作空间，也大大地提升了用户体验。原生 JS 实现对 html 元素的拖拽一、背景介绍【此处为铺垫内容，可跳过】随着 Web 前端的不断发展，各种各样的前端规范和新知识、新技术层出不穷，极大地拓展了开发者的操作空间，也大大地提升了用户体验。而随着...

evin2016 2019-08-02 15:24 评论0 收藏0
JS进阶篇4---原生JS实现对元素的拖拽

摘要：原生实现对元素的拖拽一背景介绍此处为铺垫内容，可跳过随着前端的不断发展，各种各样的前端规范和新知识新技术层出不穷，极大地拓展了开发者的操作空间，也大大地提升了用户体验。原生 JS 实现对 html 元素的拖拽一、背景介绍【此处为铺垫内容，可跳过】随着 Web 前端的不断发展，各种各样的前端规范和新知识、新技术层出不穷，极大地拓展了开发者的操作空间，也大大地提升了用户体验。而随着...

phoenixsky 2019-08-23 18:22 评论0 收藏0
从GGEditor的一个案例看JS原生拖拽功能

摘要：涉及部分的，不会对理解全局产生干扰。在上监听事件，当为画布时，通过创建一个蓝色虚线框移动的时候，更新的位置在上监听事件，落在画布时，创建一个的节点从而完成整个拖拽添加元素的功能。 showImg(https://segmentfault.com/img/remote/1460000019564977);showImg(https://segmentfault.com/img/remot...

PingCAP 2019-08-02 15:22 评论0 收藏0
从GGEditor的一个案例看JS原生拖拽功能

摘要：涉及部分的，不会对理解全局产生干扰。在上监听事件，当为画布时，通过创建一个蓝色虚线框移动的时候，更新的位置在上监听事件，落在画布时，创建一个的节点从而完成整个拖拽添加元素的功能。 showImg(https://segmentfault.com/img/remote/1460000019564977);showImg(https://segmentfault.com/img/remot...

taowen 2019-08-23 18:16 评论0 收藏0