js带有虚线框的拖动效果代码实例

最新推荐文章于 2022-07-15 11:02:26 发布
最新推荐文章于 2022-07-15 11:02:26 发布
阅读量1.4k 收藏
点赞数
分类专栏： 前端js 效果

分享一段代码实例，它实现了元素拖动效果。

在拖动的时候具有一个虚线框在移动，当松开鼠标虚线框消失，原来的元素会被放置于此。

代码实例如下:

     
     

      
      

       
       [HTML] 
       
       纯文本查看 
       
       复制代码
       
       运行代码
      
      

      
      

       
       

        
        
 
            

              01 
            
 
            

              02 
            
 
            

              03 
            
 
            

              04 
            
 
            

              05 
            
 
            

              06 
            
 
            

              07 
            
 
            

              08 
            
 
            

              09 
            
 
            

              10 
            
 
            

              11 
            
 
            

              12 
            
 
            

              13 
            
 
            

              14 
            
 
            

              15 
            
 
            

              16 
            
 
            

              17 
            
 
            

              18 
            
 
            

              19 
            
 
            

              20 
            
 
            

              21 
            
 
            

              22 
            
 
            

              23 
            
 
            

              24 
            
 
            

              25 
            
 
            

              26 
            
 
            

              27 
            
 
            

              28 
            
 
            

              29 
            
 
            

              30 
            
 
            

              31 
            
 
            

              32 
            
 
            

              33 
            
 
            

              34 
            
 
            

              35 
            
 
            

              36 
            
 
            

              37 
            
 
            

              38 
            
 
            

              39 
            
 
            

              40 
            
 
            

              41 
            
 
            

              42 
            
 
            

              43 
            
 
            

              44 
            
 
            

              45 
            
 
            

              46 
            
 
            

              47 
            
 
            

              48 
            
 
            

              49 
            
 
            

              50 
            
 
            

              51 
            
 
            

              52 
            
 
            

              53 
            
 
            

              54 
            
 
            

              55 
            
 
            

              56 
            
 
            

              57 
            
 
            

              58 
            
 
            

              59 
            
 
            

              60 
            
 
            

              61 
            
 
            

              62 
            
 
            

              63 
            
 
            

              64 
            
 
            

              65 
            
 
            

              66 
            
 
            

              67 
            
 
            

              68 
            
 
            

              69 
            
 
            

              70 
            
 
            

              71 
            
 
            

              72 
            
 
            

              73 
            
 
            

              74 
            
 
            

              75 
            
 
            

              76 
            
 
            

              77 
            
 
            
 
             
 
              <!doctype html> 
             
 
             
 
              < 
              html 
              > 
             
 
             
 
              < 
              head 
              > 
             
 
             
 
              < 
              meta  
              charset 
              = 
              "utf-8" 
              > 
             
 
             
 
              < 
              title 
              >带有虚线框的拖动效果</ 
              title 
              > 
             
 
             
 
              < 
              style 
              > 
             
 
             
 
              * { 
             
 
             
 
                 
              padding: 0; 
             
 
             
 
                 
              margin: 0; 
             
 
             
 
              } 
             
 
             
 
              #box1 { 
             
 
             
 
                 
              width: 100px; 
             
 
             
 
                 
              height: 100px; 
             
 
             
 
                 
              text-align:center; 
             
 
             
 
                 
              line-height:100px; 
             
 
             
 
                 
              background: yellow; 
             
 
             
 
                 
              position: absolute; 
             
 
             
 
                 
              cursor: move; 
             
 
             
 
              } 
             
 
             
 
              #box2 { 
             
 
             
 
                 
              width: 100px; 
             
 
             
 
                 
              height: 100px; 
             
 
             
 
                 
              border: 1px dashed #000000; 
             
 
             
 
                 
              position: absolute; 
             
 
             
 
                 
              cursor: move; 
             
 
             
 
              } 
             
 
             
 
              </ 
              style 
              > 
             
 
             
 
              < 
              script 
              > 
             
 
             
 
              window.onload = function() { 
             
 
             
 
                 
              var box1 = document.getElementById("box1"); 
             
 
             
 
                 
              box1.onmousedown = function(event) { 
             
 
             
 
                   
              var e = event || window.event; 
             
 
             
 
                   
              var disX = e.clientX - box1.offsetLeft; 
             
 
             
 
                   
              var disY = e.clientY - box1.offsetTop; 
             
 
             
 
                   
              var maxL = document.documentElement.clientWidth - box1.offsetWidth; 
             
 
             
 
                   
              var maxT = document.documentElement.clientHeight - box1.offsetHeight; 
             
 
             
 
                   
              //创建一个新的div 
             
 
             
 
                   
              var box2 = document.createElement("div"); 
             
 
             
 
                   
              box2.id = "box2"; 
             
 
             
 
                   
              box2.style.left = box1.offsetLeft + "px"; 
             
 
             
 
                   
              box2.style.top = box1.offsetTop + "px"; 
             
 
             
 
                   
              document.documentElement.appendChild(box2); 
             
 
             
 
                   
              document.onmousemove = function (event) { 
             
 
             
 
                     
              var e = event || window.event; 
             
 
             
 
                     
              var l = e.clientX - disX; 
             
 
             
 
                     
              var t = e.clientY - disY; 
             
 
             
 
                     
              if (l <= 0) { 
             
 
             
 
                       
              l = 0; 
             
 
             
 
                     
              } 
             
 
             
 
                     
              if (t <= 0) { 
             
 
             
 
                       
              t = 0; 
             
 
             
 
                     
              } 
             
 
             
 
                     
              if (l >= maxL) { 
             
 
             
 
                       
              l = maxL; 
             
 
             
 
                     
              } 
             
 
             
 
                     
              if (t >= maxT) { 
             
 
             
 
                       
              t = maxT 
             
 
             
 
                     
              } 
             
 
             
 
                     
              box2.style.left = l + "px"; 
             
 
             
 
                     
              box2.style.top = t + "px"; 
             
 
             
 
                   
              }; 
             
 
             
 
                   
              box2.onmouseup = function() { 
             
 
             
 
                     
              box1.style.left = box2.style.left; 
             
 
             
 
                     
              box1.style.top = box2.style.top; 
             
 
             
 
                     
              document.documentElement.removeChild(box2); 
             
 
             
 
                     
              box2.onmousemove = null; 
             
 
             
 
                     
              box2.onmouseup = null; 
             
 
             
 
                   
              }; 
             
 
             
 
                 
              } 
             
 
             
 
              } 
             
 
             
 
              </ 
              script 
              > 
             
 
             
 
              </ 
              head 
              > 
             
 
             
 
              < 
              body 
              > 
             
 
             
 
              < 
              div  
              id 
              = 
              "box1" 
              >拖动块</ 
              div 
              > 
             
 
             
 
              </ 
              body 
              > 
             
 
             
 
              </ 
              html 
              >

上面的代码实现了我们的要求，下面介绍一下它的实现过程。

一.代码注释:

（1）.window.onload = function() {}，文档内容完全加载完毕再去执行函数中的代码。

（2）.var box1 = document.getElementById("box1")，获取id属性值为box1的元素对象。

（3）.box1.onmousedown = function(event) {}，为box1元素注册onmousedown事件处理函数。

（4）.var e = event || window.event，兼容所有浏览器的时间对象。

（5）.var disX = e.clientX - box1.offsetLeft，获取当前鼠标指针距离元素左侧的距离。

（6）.var disY = e.clientY - box1.offsetTop，获取当前鼠标指针距离元素上侧的距离。（7）.var maxL = document.documentElement.clientWidth - box1.offsetWidth，元素可以向右拖动的最大值。

（8）.var maxT = document.documentElement.clientHeight - box1.offsetHeight，元素可以向上拖动的最大值。

（9）.var box2 = document.createElement("div")，创建虚线框div元素。

（10）. box2.id = "box2"，设置虚线框div元素的id属性值。

（11）.box2.style.left = box1.offsetLeft + "px"，设置box2元素的left属性值

（12）.box2.style.top = box1.offsetTop + "px"，设置box2的top属性值。

（13）. document.documentElement.appendChild(box2)，将此box2添加的页面。

（14）.document.onmousemove = function (event) {

  var e = event || window.event;

  var l = e.clientX - disX;

  var t = e.clientY - disY;

  if (l <= 0) {

    l = 0;

  }

  if (t <= 0) {

    t = 0;

  }

  if (l >= maxL) {

    l = maxL;

  }

  if (t >= maxT) {

    t = maxT

  }

  box2.style.left = l + "px";

  box2.style.top = t + "px";

}，将box2元素的可以拖动范围限定在浏览器客户区。

之所以将onmousemove 事件处理函数注册在document上是为了防止快速拖动导致鼠标脱离元素，失去拖动效果。

（15）.box2.onmouseup = function() {

  box1.style.left = box2.style.left;

  box1.style.top = box2.style.top;

  document.documentElement.removeChild(box2);

  box2.onmousemove = null;

  box2.onmouseup = null;

},当鼠标松开的时候，将box1的位置设置为当前box2的位置。

然后删除box2，并解绑事件处理函数。

Return_KB
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
拖拽模块到输入框
08-21
点击选中字段的拖拽到对应的输入框中
css实现虚线边框滚动效果的实例代码
12-28
常常看到一种酷炫的效果，鼠标hover一片区域后，区域显示出虚线边框，并且还有线条动画，那么这种效果具体是怎么实现的呢，本文提供了几种思路仅供参考。 基本HTML 测试测试 Easy-way 通过背景图片实现。 p得...
js鼠标十字虚线效果
盛世芳华
07-15 472
js鼠标十字虚线效果
用js打造类windows的虚线拖拽框
浮白
07-31 2764
没事无聊，突然发现在windows下面一个很平常的细节，而在ie上没有，现在ria大行其道，很多web应用都在积极的效仿类windows的桌面效果，ext.dojo等等js类库中间都有很多绚丽的widget,很多人都认为js是一门玩具语言，很大一部分原因是他的语言的自由，不同的程序员能写出不同的风格，还有就是js没有属于自己的图形类库（canvas至少没有普及和成熟），要画图，我们需要采用ad
鼠标事件-拖拽5（带虚线框的拖拽）
u011927449的博客
07-15 500
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> #div2 { width: 150px; height: 150px; position: absolute; background: #CCCCCC; } .box{ border: 1px dashed black;
快速上手用JS实现元素的拖动与占位
可爱不能当饭吃
11-12 4412
这篇博客，是博主这几天刚做的一个项目遇到的一个难点，学会了这个，你就能轻松实现页面元素的移动啦，再配合一些条件，就可以做出一个任务完成进度的页面了！ 先来看看效果： 实现功能： 拖动元素从一个板块移动到另一个板块的某个位置，博主根据自己的需求做的这个是点击的元素 只能移动到它所在模块的下一个模块，如果移动到别的模块就会回到原来位置，而且当你拖动的 元素位置没有超过某个距离也会自动弹回到原来位置 案例分析： 关键一步就在于！当你鼠标按下的时候，不仅要获取到当前的元...
DIV+CSS实例虚线边框|CSS虚线下划线及虚线用应
01-21
黑色虚线边框[code/]实例： CSS代码： [code].divcss5{border:1px dashed #000; height:50px;width:350px} Html代码：复制代码代码如下:”divcss5″>我的四边为黑色虚线边框</div> 这里设置边框缩写方式
js圆形虚线指针时钟特效特效代码
03-20
"js圆形虚线指针时钟特效特效代码"就是一个实例，它利用原生JavaScript和CSS3技术来实现一个具有吸引力的互动时钟界面。这个时钟的独特之处在于它的指针是虚线形式的，给用户带来一种现代和简洁的视觉体验。 首先，...
Android实现代码画虚线边框背景效果
08-31
在Android开发中，有时我们需要为View添加特定的边框效果，比如虚线边框。传统的做法可能是使用PNG图片作为背景，但这种方法不够灵活且资源消耗较大。本文将介绍如何使用Android代码来实现虚线边框背景效果，这种...
【 border虚线】CSS border虚线边框属性教程
04-11
学习之路不可停止，最近在研究CSS，今天爱站技术频道的小编就給你们带来这篇CSS border虚线边框属性教程，教大家如何使用css制作网页中的虚线，巩固CSS border属性使用方法，感兴趣的同学可以参考一下。
JS-拖拽效果至 视窗 \ 边界 （鼠标事件拖拽、监听拖拽）
DcTbnk的博客
04-02 2265
一. 拖拽至视窗 拖拽的效果 — 边界值 鼠标移动出页面,但是div要留在页面范围内 给定位数值,添加极限范围数值, 定位的最大值,最小值,都要有范围 最小值 : 上 左 都是 0 var oDiv = document.querySelector('div'); var oldTop = window.getComputedStyle(oDiv).top; var oldLeft = w...
js 实现虚线边框旋转效果
qq_37029373的博客
09-13 2504
无意看到百度ueditor编辑器网站首页（http://ueditor.baidu.com/website/）底部有一个滚动虚框的效果(原谅我不会做gif 图)，如图： 就去看了一下，开始以为是CSS,后来打开F12 ，哦原来是js,那就尝试写一下吧......菜鸟就是要经常动手 html 部分： <div class="box"> <div class="topBo...
带虚框的拖拽
_ACME_的博客
06-19 1640
其实这个原理也很简单.就是当鼠标按下的时候元素周围出现一个虚框，然后当鼠标移动的时候，只移动虚框，元素不移动，然后当鼠标抬起的时候，直接把元素移动到虚框位置，并且虚框消失.例子： CSS代码： *{margin:0;padding:0;} #div1{width:100px;height: 100px;background: red;position: absolute;left:
拖拽+重叠+虚线框（解决移动文字复制问题）
新嘉庄的博客
01-18 1041
拖拽+重叠+虚线框（解决移动文字复制问题） *{margin:0; padding:0;} .f-wrap{width: 1000px; margin:10px auto;} .box{ position: absolute; top:0; left:40%; width: 150px; height: 150px; color:#fff;
js实现带框拖拽
失心疯的博客
10-04 2784
带框拖拽 目录 代码实例 代码解析 下载源码链接 代码实例 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;带框拖拽&lt;/title&gt; &lt;style type="text/css"&gt; .div1{ width:400px; height: 400px;
代码生成一个列表，不要带任何虚线
最新发布
06-07
好的，以下是使用Python生成一个不带任何虚线的列表的示例代码： ```python my_list = [1, 2, 3, 4, 5] print("[" + ", ".join(str(i) for i in my_list) + "]") ``` 这段代码将生成一个包含整数1到5的列表，并将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值