纯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 相关文章推荐
PJBlog插件 防刷新的在线播放器
Oct 25 Javascript
锋利的jQuery 要点归纳(一) jQuery选择器
Mar 21 Javascript
javascript中直接引用Microsoft的COM生成Word
Jan 20 Javascript
javascript复制粘贴与clipboardData的使用
Oct 16 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
Apr 01 Javascript
JS组件Bootstrap实现弹出框效果代码
Apr 26 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
Jun 13 Javascript
功能强大的jquery.validate表单验证插件
Nov 07 Javascript
JS实现微信摇一摇原理解析
Jul 22 Javascript
Vue SPA单页应用首屏优化实践
Jun 28 Javascript
如何手动实现es5中的bind方法详解
Dec 07 Javascript
node 版本切换的实现
Feb 02 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
《一拳超人》埼玉一拳下去,他们存在了800年毫无意义!
2020/03/02 日漫
THINKPHP+JS实现缩放图片式截图的实现
2010/03/07 PHP
Zend Framework教程之动作的基类Zend_Controller_Action详解
2016/03/07 PHP
PHP数据对象PDO操作技巧小结
2016/09/27 PHP
php调用云片网接口发送短信的实现方法
2017/10/25 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
Laravel-admin之修改操作日志的方法
2019/09/30 PHP
微信小程序 教程之数据绑定
2016/10/18 Javascript
JS中闭包的经典用法小结(2则示例)
2016/12/28 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
2017/02/28 Javascript
vue弹窗组件使用方法
2018/04/28 Javascript
js中apply()和call()的区别与用法实例分析
2018/08/14 Javascript
angularjs使用div模拟textarea文本框的方法
2018/10/02 Javascript
详解基于Wepy开发小程序插件(推荐)
2019/08/01 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
2019/09/10 Javascript
vue ajax 拦截原理与实现方法示例
2019/11/29 Javascript
angular异步验证防抖踩坑实录
2019/12/01 Javascript
vue中实现回车键登录功能
2020/02/19 Javascript
JS正则表达式常见函数与用法小结
2020/04/13 Javascript
js实现随机点名
2021/01/19 Javascript
sqlalchemy对象转dict的示例
2014/04/22 Python
使用Python的PEAK来适配协议的教程
2015/04/14 Python
使用Python横向合并excel文件的实例
2018/12/11 Python
使用Python爬虫库BeautifulSoup遍历文档树并对标签进行操作详解
2020/01/25 Python
解决pycharm中opencv-python导入cv2后无法自动补全的问题(不用作任何文件上的修改)
2020/03/05 Python
python爬取音频下载的示例代码
2020/10/19 Python
python Pexpect模块的使用
2020/12/25 Python
Smashbox官网:美国知名彩妆品牌
2017/01/05 全球购物
Shein英国:女性时尚网上商店
2019/04/10 全球购物
马来西亚奢侈品牌购物商城:Valiram 247
2020/09/29 全球购物
JSF面试题:Jsf中导航的标签是什么
2013/04/20 面试题
2015年六一儿童节演讲稿
2015/03/19 职场文书
2016五一劳动节慰问信
2015/11/30 职场文书
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL
Nginx虚拟主机的配置步骤过程全解
2022/03/31 Servers
阿里云服务器(windows)手动部署FTP站点详细教程
2022/08/05 Servers