一个对页面节点的拖踹用原生js该如何实现

发布网友发布时间：2022-04-29 07:56

我来回答

共6个回答

热心网友时间：2022-04-22 13:31

很简单需要三个事件 onmousedown onmousemove onmouseup

并给需要拖动的节点增加一个属性叫droping(这个属性表示节点是不是正处于拖拽状态)下面给出一份演示

onmousedown 控制节点扩展的属性droping为true(表示可以移动节点了)

onmousemove 控制节点的位置(判断是否可以移动如果是就移动)

ommouseup控制节点的扩展属性为false(表示不能移动节点了)

<!DOCTYPE HTML>
<html>
<head>
<title>演示</title>

<style type="text/css">
</style>
</head>
<body>
<div id="dropDiv">
我可以拖动
</div>
<script type="text/javascript">
function dropDivFun(Element){
//设置节点的定位为fixed
Element.style.position="fixed";
//获取事件对象函数方便获取事件的clientX
function getEvent(){
if(event){
e=event;
}else if(window.event){
e=window.event;
}else{
e=arguments.callee.arguments[0];
}
return e;
}
//添加mousedown事件
Element.addEventListener("mousedown",function(){
var e=getEvent();
if(!Element.droping){
//设置droping为true并记录初始的位置
Element.droping=true;
Element.start_x=e.clientX-Element.offsetLeft;
Element.start_y=e.clientY-Element.offsetTop;
}
});
Element.addEventListener("mousemove",function(){
var e=getEvent();
//移动节点
if(Element.droping){
Element.style.left=e.clientX-Element.start_x+"px";
Element.style.top=e.clientY-Element.start_y+"px";
}
});
Element.addEventListener("mouseup",function(){
if(Element.droping){
//设置droping为false并释放初始的变量
Element.droping=false;
Element.start_x=null;
Element.start_y=null;
}
});
}
//为节点添加drop事件
dropDivFun(document.getElementById("dropDiv"));
</script>
</body>
</html>

该演示演示了使用原生js给节点拖动

热心网友时间：2022-04-22 14:49

绑定点击事件，onmousedown/ontouchstart的时候记录鼠标点击的位置pageX、pageY，然后绑定移动事件onmousemove/ontouchmove，获得此时的pageX、pageY，然后与初始位置相减，得到差值a,b，更改元素的transformX(a),transformY(b)，到此时就实现了移动，onmouseup/ontouchend之后获得最终的位置，再进一步操作就行了

热心网友时间：2022-04-22 16:24

mousedown+mousemove 然后根据clientX和clientY判断鼠标位置以确定拖拽距离

热心网友时间：2022-04-22 18:15

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<title>event事件</title>
<style type="text/css">
        #box{width: 100px;height: 100px; background-color: red;position: absolute;}

</style>
</head>
<body>
     <div id="box"></div>
     <script type="text/javascript">

     var box=document.getElementById('box');
     var ww=document.documentElement.clientWidth;
        var ww1=document.documentElement.clientHeight;
        box.onmousedown=function (ev) {
        var ev=ev||window.event;
        var a=ev.clientX-box.offsetLeft;
        var b=ev.clientY-box.offsetTop;

            document.onmousemove=function (ev) {
         var ev=ev||window.event;
         var c=ev.clientX-a;
         var d=ev.clientY-b;

              if(c<=0){
                  c=0;
              }
              //if (a>=ww-box.clientWidth) {
              //   c=ww-box.clientWidth;
              // }
                 if (d<=0) {
               d=0;
              }
              // if (b>=ww1-box.clientHeight) {
              //   d=ww1-box.clientHeight;
              // }
        box.style.left=c+'px';
        box.style.top=d+'px';
        }
        }
        box.onmouseup=function () {
           document.onmousemove=null;
        }

     </script>
</body>
</html>

热心网友时间：2022-04-22 20:23

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" style='width:336px;height:69px;border: 1px solid gray;' ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div id="drag1" style='width:300px;height:50px;border: 1px solid gray;' draggable="true" ondragstart="drag(event)"> </div>
</body>
</html>

参照http://www.w3school.com.cn/html5/html_5_draganddrop.asp

热心网友时间：2022-04-22 22:48

document.querySelector("#container:first-child")