js拖拽实现

最新推荐文章于 2023-11-28 11:58:47 发布
最新推荐文章于 2023-11-28 11:58:47 发布
阅读量628 收藏
点赞数 1
文章标签： 拖拽
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zyzn1425077119/article/details/49228711
版权

拖拽为dragstart-drag-dragenter-dragover-drop-dragend

1 一个div拖到另一个div

<!DOCTYPE html>
<html>
<head>
<title>dragToDrop.html</title>

<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=GBK">
<style type="text/css">
#drop {
    width: 300px;
    height: 200px;
    background-color: #ff0000;
    padding: 5px;
    border: 2px solid #000000;
}
#item {
    width: 100px;
    height: 100px;
    background-color: #ffff00;
    padding: 5px;
    margin: 20px;
    border: 1px dashed #000000;
}
</style>
<script type="text/javascript">
    
    var EventUtil={
      addHandler:function(element,type,handler){
          console.log("绑定事件");
          if(element.addEventListener){
              element.addEventListener(type,handler,false);
          }else if(element.attachEvent){
              element.attachEvent("on"+type,handler);
          }else{
              element["on"+type]=handler;
          }
      },
    removeHandler:function(element,type,handler){
      console.log("去除事件");
      if(element.removeEventListener){
          element.removeEventListener(type,handler,false);
      }else if(element.detachEvent){
          element.detachEvent("on"+type,handler);  
      }else{
        element["on"+type]=null;  
      }
    },
    getEvent:function(event){
        console.log("得到事件");
        return event?event:window.event;
    },
    getTarget:function(event){
        console.log("得到目标");
        return event.target||event.srcElement;
    },
    preventDefault:function(event){ //阻止默认
        if(event.preventDefault){
            console.log("阻止默认:preventDefault");
            event.preventDefault();
        }else{
            console.log("阻止默认:returnValue=false");
            event.returnValue=false;
        }
        
     },
     stopPropagation:function(event){
         console.log("去除冒泡");
         if(event.stopPropagation){
             event.stopPropagation();
         }else{
             event.cancelBubble=true;
         }
     }
    };
    
    window.οnlοad=function(){

    var droptarget=document.getElementById("drop");
    EventUtil.addHandler(droptarget, "dragover",function(event){
        console.log("--dragover-");
        EventUtil.preventDefault(event);
    });
    
    EventUtil.addHandler(droptarget, "dragenter",function(event){
        console.log("--dragenter-");
        EventUtil.preventDefault(event);
    });
    
    EventUtil.addHandler(droptarget, "drop",function(event){
        console.log("--drop-");
        event=EventUtil.getEvent(event);
        EventUtil.preventDefault(event);
        event.dataTransfer.dropEffect="copy";
        var id=event.dataTransfer.getData("Text");
        droptarget.appendChild(document.getElementById(id));
    });
    
    var item= document.getElementById("item");
    item.setAttribute("draggable","true");
    EventUtil.addHandler(item,"dragstart",function(event){
        console.log("--dragstart-");
        event=EventUtil.getEvent(event);
        event.dataTransfer.effectAllowed="copy";
        event.dataTransfer.setData("Text",item.id);
    });
    
    EventUtil.addHandler(item,"drag",function(event){
        console.log("--drag-");
    });
    EventUtil.addHandler(item,"dragend",function(event){
        console.log("--dragend-");
    });
    
    };
    </script>
</head>
<body>
    <div>
        <p>把黄色小方块拖入到红色大方框中--dragstart-drag-dragenter-dragover-drop-dragend</p>

    </div>
    <div id="item" draggable="true">需要拖放的元素</div>
    <div id="drop">拖放的位置</div>
</body>
</html>

2 图片的拖拽

<!DOCTYPE html>
<html>
  <head>
    <title>dragAndDrop.html</title>
    
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=GBK">
    
    <style type="text/css">
      .showOne{
        background-color:#ffeeaa;
        width:300px;
        height:300px;
      }
    </style>
   
  </head>
  <body>
   <p>
            测试元素的拖拽和拖放！（draggable设置元素释放可以被拖拽，draggable="true"表示可拖拽，否则,draggable="false"表示不可拖拽）
  <br/>
       拖动的目标会触发：dragstart->drag->dragend:
  <br/>到目标时，会触发：dragenter->dragover->dragleave(离开)或drop
   </p>
         可以移动:
   <img id="Item" src="./images/1.jpg" alt="图片1无法显示" width="100px" height="100px"/>
   <hr/><br/>
        不可以移动(通过设置draggable="false")：
   <img src="./images/2.jpg" draggable="false" alt="图片1无法显示" width="100px" height="100px"/>
   <br/>
   <div class="showOne" id="droptarget" >
     ff
   </div>
   <br/>
   
    <script type="text/javascript">
    
    var EventUtil={
      addHandler:function(element,type,handler){
          if(element.addEventListener){
              element.addEventListener(type,handler,false);
          }else if(element.attachEvent){
              element.attachEvent("on"+type,handler);
          }else{
              element["on"+type]=handler;
          }
      },
    removeHandler:function(element,type,handler){
      if(element.removeEventListener){
          element.removeEventListener(type,handler,false);
      }else if(element.detachEvent){
          element.detachEvent("on"+type,handler);  
      }else{
        element["on"+type]=null;  
      }
    },
    getEvent:function(event){
        return event?event:window.event;
    },
    getTarget:function(event){
        return event.target||event.srcElement;
    },
    preventDefault:function(event){ //阻止默认
        if(event.preventDefault){
            console.log("阻止默认:preventDefault");
            event.preventDefault();
        }else{
            console.log("阻止默认:returnValue=false");
            event.returnValue=false;
        }
     },
     stopPropagation:function(event){
         if(event.stopPropagation){
             event.stopPropagation();
         }else{
             event.cancelBubble=true;
         }
     }
    };
    
    var Item=document.getElementById("Item");//拖放的物体，此即图片
    EventUtil.addHandler(Item, "dragstart",function(event){
        console.log("--Item-dragstart-");
        var target=EventUtil.getTarget(event);
        event.dataTransfer.setData("Text",target.id);
        
    });
    
    EventUtil.addHandler(Item,"drag",function(event){
        console.log("-Item-drag-");
    });
    EventUtil.addHandler(Item,"dragend",function(event){
        console.log("-Item-dragend-");
    });
    
    var droptarget=document.getElementById("droptarget");
    EventUtil.addHandler(droptarget, "dragover",function(event){
        console.log("--dragover-");
        EventUtil.preventDefault(event);
    });
    
    EventUtil.addHandler(droptarget, "dragenter",function(event){
        console.log("--dragenter-");
        EventUtil.preventDefault(event);
    });
    
    EventUtil.addHandler(droptarget, "drop",function(event){
        console.log("--drop-");
        var target=EventUtil.getTarget(event);
 
        var data=event.dataTransfer.getData("Text");
        target.appendChild(document.getElementById(data));
           EventUtil.preventDefault(event);     
    });
 
    </script>
  </body>
</html>



不带刺仙人球
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
js 实现拖拽
csdn_chenli
09-29 575
JavaScript基础入门学习，实现移动拖拽。适合新手学习和参考。不足之处希望大神提出你宝贵的意见。 一：实现简单的拖拽 二：实现浏览器的兼容性。在拖拽的过程中不会超出屏幕，当你拖拽物体放在那里，就是那里。如果放在右下角，缩小屏幕是，物体不会被遮罩。 实现效果： 一、简单的实现拖拽 一 界面设计     二 设计效果        由于我们弹窗的遮罩我们采用了c
js实现拖拽缩放
weu135的专栏
06-17 2081
最近需要用到拖拽，前端人员找了个拖拽代码，主要都是从网上下的，代码如下： $.fn.extend({ Drag: function() { $(this).attr("isDrag", 1); $(this).mousedown(function(e) { if ($(
js 实现拖拽效果
weixin_44244924的博客
03-31 615
js实现拖拽效果
使用js实现拖拽功能（附具体实现代码）
热门推荐
笑到根本停不下来的Kathy思的博客
05-24 1万+
js拖拽功能的实现主要依靠3个事件，分别是onousedown鼠标按下、onmousemove鼠标移动和onmouseup鼠标抬起。并且它们具体是按照这样的一个顺序执行的。 `event.clientX`和`event.clientY`分别是鼠标当前的横坐标和纵坐标，`offsetX` 和 `offsetY` 分别表示元素的初始横坐标和纵坐标，移动的过程改变的是绝对定位下的`left`和`top`值。
js实现拖拽功能
study_way的博客
10-17 2178
在这个示例中，创建了两个元素：一个可拖拽的元素（draggable）和一个接受拖动的目标元素（droppable）。ondragover 阻止默认行为，以允许元素可以放置在该区域，而 ondrop 处理实际的拖放操作，将拖拽的元素追加到目标元素中。通常，要实现拖拽效果，需要将元素设置为绝对定位，这样它可以脱离文档流，使其能够在页面上自由移动。事件处理程序中更新元素的位置时，限制元素的移动范围，以防止它移出可见区域或父元素的边界。事件处理程序中，计算鼠标位置的变化，并根据变化来更新被拖拽元素的位置。
如何使用js实现拖拽效果？
黄彪博客
11-28 2452
因为设置了拖拽属性的元素就可以被拖拽，结束拖拽的时候获取一下鼠标与页面的距离，减去鼠标与元素中的距离就行了，逻辑为旧有拖拽方式的第二种：盒子的位置 = 元素与页面间的距离 - 元素与盒子的距离。：返回元素与有定位的父类的上左边距，如果父类都没有定位，那么返回相对于页面的上左边距（本示例中页面内只有一个元素，故获取的值是元素相对于页面的距离）：鼠标距离触发事件的元素的上左边距（本示例中只有一个元素，故获取的值为鼠标相对于盒子元素的上左边距）// 元素的位置 = 鼠标与页面的距离 - 鼠标与元素的距离。
js中的拖拽
betterangela的博客
11-11 3209
拖拽 dom javascript
javascript实现完美拖拽效果
10-24
在JavaScript中实现完美的拖拽效果是一项常见的交互设计任务，尤其在开发网页相册或可操作的用户界面时。通过理解和应用基本的DOM操作、事件处理以及位置计算，我们可以创建一个平滑且功能丰富的拖放体验。下面将...
原生js拖拽实现图形伸缩效果
10-15
《原生JS实现图形拖拽与伸缩效果详解》 在网页开发中，动态交互功能是提升用户体验的重要一环。本文将深入探讨如何利用原生JavaScript实现图形的拖拽及伸缩效果，这对于创建可自定义大小的界面元素或者富媒体应用来...
js实现单元格拖拽效果
11-20
在JavaScript中实现单元格拖拽效果，主要是通过监听鼠标事件并改变元素的位置来完成的。以下将详细解析这个实例中的各个部分以及所涉及的关键知识点： 1. **CSS基础布局**： - `* { margin: 0; padding: 0; }` ...
js实现DIV拖拽布局
09-08
js实现DIV拖动布局，可以用来实现自定义桌面
js最简单的拖拽效果实现代码
12-10
其实对于弹出层而言，拖拽最初的目的很单纯，就是为了通过拉开层，使被弹出层挡住的内容可见，（当然，后来关于拖拽的功能不断被优化，使得拖拽的应用有了别的意义，最典型的如igoogle的自定义首页，通过拖放的形式满足用户自定义想要的内容模块顺序和位置）。 本文讨论的重点不是iGoogle的拖放效果，那属于进阶篇，本文是拖拽的“第一阶”，如题，实现最简单的拖拽。 这里的“最简单”即不考虑多个拖拽层的堆叠顺序，不考虑拖拽范围限制，不考虑类似iGoogle的“dragTo”的效果等等。。。 恩，废话不多说了，先给大家看个实例吧： 拖我试试… content…点此–>打开 由于我是直接在页面上内嵌的所有代码
js实现拖拽功能(支持左右拖动、删除)
09-20
概述：实现拖拽工作流程配置，可以鼠标左右移动元素，鼠标双击可以删除元素。 基本原理：就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化;元素的移动就是style.position的 top和left的改变。当然，并不是任何时候移动鼠标都要造成元素的移动，而应该判断鼠标左键的状态是否为按下状态，是否是在可拖拽的元素上按下的。
原生js实现四种拖拽效果
06-13
四种拖拽效果：只可在浏览器中拖拽；可超出浏览器拖拽；点击头部在浏览器中拖拽；点击头部可超出浏览器拖拽
js实现鼠标拖动div.html
02-14
今天有个需求,要实现弹框,并且需要能过拖动位置,放大缩小等功能,这里是一个纯JS实现拖动的例子,有需要完整案例,或者其他功能可以私信,我懂的都会帮你
纯js实现可拖拽和点击的悬浮球
最新发布
04-01
本文将深入讲解如何利用JavaScript实现这样的功能。 首先，我们需要创建HTML结构，用于显示悬浮球。一个简单的悬浮球可以由一个`<div>`元素来表示，我们可以通过CSS设置其样式，使其看起来像一个球体： ```html ...
js拖拽功能的实现
weixin_61738415的博客
04-19 437
/ 因为我们需要在按下的位置拖拽，因此我们还需要获取按下键鼠标相对div的左上角位置。// 当鼠标移动时，将当前鼠标相对视口的坐标赋值给元素的left和top。// 使用当前鼠标位置减去这个相对元素的左上角位置，保证鼠标所按位置拖拽。// 当释放鼠标键时，删除鼠标移动事件和删除鼠标释放事件。
JS 实现拖拽元素的功能
GoldenaArcher的博客
05-21 1170
这篇笔记比较短，主要过一遍draggable的事件。border;padding;margin;max-width;width;licursor;.card;border;padding;margin;box-shadow;.droppable;
原生js实现拖拽功能
weixin_47450807的博客
03-09 3922
一、写在前面 如果我们想要实现拖拽的功能，必须要知道三个事件： 1、onmousedown：鼠标按下事件 2、onmousemove：鼠标移动事件 3、onmouseup：鼠标抬起事件 二、实现思路 我们当左键点击时，需要记录当前的鼠标点击位置相对于该元素左上角的x，y坐标， 这里我们使用diffX和diffY来表示。然后我们移动时需要不断计算当前元素距离浏 览器左边和上边的距离。然后给元素进行赋值。当鼠标抬起时，然后取消鼠标移动事 件和鼠标抬起事件。 三、代码 <div id="drag"&g
Sortable.js拖拽排序实现详解
"Sortable.js是一个强大的JavaScript库，用于实现拖拽排序功能。本文将详细解析Sortable.js的使用方法，包括其核心事件以及基本的DOM操作。虽然Sortable.js的源码大约有1300行，但设计得相当精炼，适用于各种拖拽...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值