纯js实现的积木(div层)拖动功能示例


Posted in Javascript onJuly 19, 2017

本文实例讲述了纯js实现的积木(div层)拖动功能。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>拖动</title>
  <style type="text/css">
  </style>
</head>
<body id="content">
<input type="button" value="获取积木" id="div3"/>
</body>
<script>
  //生成积木
  document.getElementById("div3").onclick=function(){
    var num = getnumber();
    var num1 = getnumber();
    var num2 = getnumber();
    var num3 = getnumber();
    var divs = '<div id="s'+num+'"style="width: 200px;height: 200px;position: absolute;background:rgb('+num1+','+num2+','+num3+')"></div>'
    document.getElementById("content").insertAdjacentHTML("beforeEnd",divs);
    darg1("s"+num+"");
  };
  //h获取随机数,获取随机颜色
  function getnumber(){
    return parseInt(Math.random()*255);
  }
  //拖动积木
  function darg1(id){
    var obj = document.getElementById(id);
    var objx = 0;
    var objy = 0;
    obj.onmousedown = function(even){
      //鼠标到div的距离
      objx = even.clientX - obj.offsetLeft;
      objy = even.clientY - obj.offsetTop;
      //div移动的距离 = 鼠标到父窗口的距离 - 鼠标到div的距离
      document.onmousemove = function(even){
        obj.style.left = even.pageX-objx+'px';
        obj.style.top = even.pageY-objy+'px';
      };
      document.onmouseup = function(){
        document.onmousemove = null;
        document.onmouseup = null;
      };
    };
    return false;
  }
</script>
<html>

点击button按钮,获取积木,获取积木后可以在浏览器内随意拖动生成的积木:

纯js实现的积木(div层)拖动功能示例

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jquery 锁定弹出层实现代码
Feb 23 Javascript
JS获取url链接字符串 location.href
Dec 23 Javascript
js保留小数点后几位的写法
Jan 03 Javascript
JavaScript中Date.toSource()方法的使用教程
Jun 12 Javascript
js实现滚动条滚动到页面底部继续加载
Dec 19 Javascript
Angular下H5上传图片的方法(可多张上传)
Jan 09 Javascript
详解axios在node.js中的post使用
Apr 27 Javascript
nuxt.js中间件实现拦截权限判断的方法
Nov 21 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
Apr 30 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
Jul 20 Javascript
vue+axios全局添加请求头和参数操作
Jul 24 Javascript
JS代码简洁方式之函数方法详解
Jul 28 Javascript
vue loadmore组件上拉加载更多功能示例代码
Jul 19 #Javascript
vue引入swiper插件的使用实例
Jul 19 #Javascript
vue loadmore 组件滑动加载更多源码解析
Jul 19 #Javascript
JS实现的走迷宫小游戏完整实例
Jul 19 #Javascript
JS设置随机出现2个数字的实例代码
Jul 19 #Javascript
利用jQuery异步上传文件的插件用法详解
Jul 19 #jQuery
JavaScript 值类型和引用类型的初次研究(推荐)
Jul 19 #Javascript
You might like
PHP中is_file不能替代file_exists的理由
2014/03/04 PHP
单台服务器的PHP进程之间实现共享内存的方法
2014/06/13 PHP
php之可变变量的实例详解
2017/09/12 PHP
javascript基础知识大集锦(一) 推荐收藏
2011/01/13 Javascript
jQuery 源码分析笔记(2) 变量列表
2011/05/28 Javascript
Javascript图像处理—平滑处理实现原理
2012/12/28 Javascript
获取表单控件原始(初始)值的方法
2013/08/21 Javascript
JavaScript实现的圆形浮动标签云效果实例
2015/08/06 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
Bootstrap每天必学之表单
2015/11/23 Javascript
微信小程序链接传参并跳转新页面
2016/11/29 Javascript
jQuery实现简单弹窗遮罩效果
2017/02/27 Javascript
javascript将json格式数组下载为excel表格的方法
2017/12/22 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
2017/12/28 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
2018/09/20 Javascript
Python学习之asyncore模块用法实例教程
2014/09/29 Python
在Python中使用itertools模块中的组合函数的教程
2015/04/13 Python
Python正则表达式使用经典实例
2016/06/21 Python
详解python的数字类型变量与其方法
2016/11/20 Python
Python 多线程实例详解
2017/03/25 Python
对命令行模式与python交互模式介绍
2018/05/12 Python
python3.x实现发送邮件功能
2018/05/22 Python
python3实现绘制二维点图
2019/12/04 Python
基于Python执行dos命令并获取输出的结果
2019/12/30 Python
网易微博Web App用HTML5开发的过程介绍
2012/06/13 HTML / CSS
html5使用canvas画三角形
2014/12/15 HTML / CSS
城市观光通行证:The Sightseeing Pass
2018/04/28 全球购物
德国汽车零件和汽车配件网上商店:kfzteile24
2018/11/14 全球购物
四群教育工作实施方案
2014/03/26 职场文书
2014年教师德育工作总结
2014/11/10 职场文书
2014年设备管理工作总结
2014/11/26 职场文书
求职意向书范本
2015/05/11 职场文书
导游词之绍兴柯岩古镇
2020/01/09 职场文书
opencv 分类白天与夜景视频的方法
2021/06/05 Python
Python实现查询剪贴板自动匹配信息的思路详解
2021/07/09 Python
Win10鼠标轨迹怎么开 Win10显示鼠标轨迹方法
2022/04/06 数码科技