原生JS拖拽元素

最新推荐文章于 2025-06-24 13:38:39 发布

「已注销」

最新推荐文章于 2025-06-24 13:38:39 发布

阅读量442

点赞数

CC 4.0 BY-SA版权

分类专栏：原生JS

本文链接：https://blog.youkuaiyun.com/weixin_43405525/article/details/88864388

原生JS 专栏收录该内容

9 篇文章

订阅专栏

这篇博客介绍了如何使用JavaScript实现元素的拖拽功能。通过监听鼠标按下、移动和松开事件，结合元素的相对定位，更新元素的位置。同时，文章强调了拖动元素的CSS position属性需为relative、fixed或absolute，并且在拖动过程中增加z-index以确保层级。此外，还讨论了防止在拖动时选中文字的处理方法和兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS拖拽元素

思路：鼠标按下拖动，就要获取到鼠标距离父元素的坐标
思路如下(素材来源于网络)

在这里插入图片描述
父元素top = 鼠标距离浏览器Y轴 - 鼠标距离浏览器Y轴 =“px”；
父元素left = 鼠标距离浏览器X轴 - 鼠标距离浏览器X轴 =“px”；
前提情况下你移动的目标css position得有relative，fixed，absolute

让移动目标zindex值+1；

var Zindex = 0;

绑定事件，解决兼容性问题

function on(node, event, handler) {
    if (node.addEventListener) {
	    node.addEventListener(event, handler, false);
	    } else if (node.attachEvent) {
	    node.attachEvent("on" + event, handler);
    }
}

封装获取样式

function getcss(node,cssname){
    var tarStyle;
	    if(window.getComputedStyle){
	    tarStyle = wiindow.getComputedStyle(null,node)[cssname];
		    }else{
		    tarStyle = node.currentStyle[ cssname ];
	    }
    return tarStyle;
}

封装设置css

function setCss(node,css){
    for (let key in css) {
 	   node.style[ key ] = css[ key ];
    }
}

点击目标的父元素，一般都是通过点击标题拖动，所以要给他父元素加上top，left

var target,

当前状态，为false禁止拖动

state = false,
记录鼠标按下去是距离父元素上边和左边距离
x,
y;

封装获取元素方法

function getNode(id) {
    return document.getElementById(id);
}

主要函数

function Drag(id) {

    var elem = getNode(id);
    function down(e) {
	    target = e.target.offsetParent;
	    Zindex++;
	    setCss(target,{
	    "zIndex":Zindex
    });
    
    x = e.layerX;
    y = e.layerY;
    state =true;
}
on(elem, "mousedown",down);

拖动标题时可能会选择到标题里面的文字，禁止掉

elem.onselectstart = function(){
   		 return false;
    }
}

绑定鼠标移动，弹起事件

on(document, "mousemove", move);
on(document, "mouseup", up);

鼠标松开时让state为false，禁止移动时调用

function up(){
  state = false;
}

 function move(e) {

为了优化性能，鼠标移动时每隔20毫秒调用一次，不优化时鼠标每次移动都会调用

setTimeout(() => {
    if (state) {
	    setCss(target,{//clientX
		    "left":e.clientX - x +"px",
		    "top":e.clientY - y +"px"
		    });
	    }
    }, 20);
}

调用方法

Drag("popup-title");

HTML

<div class="popup-scarfskin" id="popup-scarfskin">
  <div id="popup-title" class="popup-title">
    我是标题我是标题我是标题我是标题我是标题
  </div>
  <div class="popup-TEXT">
    我是内容
  </div>
  <div class="popup-BTN">
    <span id="are" style="background-color: #348eff;color: #ccc;">是</span>
    <span  id="close"
      style="background-color: #fff;color: #348eff;border: 1px solid #ccc;">否</span>
  </div>
</div>

CSS

.popup-scarfskin{
    width: 350px;
    min-height: 200px;
    -webkit-box-shadow: 0px 0px 5px 5px #eee;
    -moz-box-shadow:  0px 0px 5px 5px #eee;
    box-shadow: 0px 0px 5px 5px #eee;
    position:   absolute;
    background-color: #fff;
    /* display: none; */
}
.popup-title{
    position: relative;
    left: 0;
    height: 50px;
    cursor: move;
    font-size: 12px;
    padding: 0 15px ;
    display: block;
    /* max-width: 150px; */
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.popup-scarfskin .popup-title{
    line-height: 50px;
    color: #717171;
}

.popup-TEXT{
    width: 340px;
    min-height: 140px;
    color: #717171;
    font-size: 14px;
    padding: 5px;
    max-height: 200px;
    overflow: auto;
    border-top: 1px dashed #ccc;
}

.popup-BTN{
    border-top: 1px dashed #ccc;
    min-height: 50px;
    padding: 5px;
    line-height: 50px;
}

.popup-BTN span{
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
    line-height: 30px;
    background-color: #717171;
    display: inline-block;
    width: 60px;
    text-align: center;
    font-size: 14px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

#are:hover{
    background-color: #3070d2!important;
    color: #fff!important;
}

#close:hover{
    border: 1px solid #3070d2!important;
    color: #ccc!important;
}