JS实现盒子拖拽效果


Posted in Javascript onFebruary 06, 2020

本文实例为大家分享了JS实现盒子拖拽效果的具体代码,供大家参考,具体内容如下

效果:

JS实现盒子拖拽效果

html代码:

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>拖拽</title>
<body>
  <div class="leftBox"></div>
  <div class="rightBox">
    <!-- 开启拖拽属性draggable -->    
    <div class="circle" draggable="true"></div>
  </div>
</body>
 
</html>

css代码:

<style>
    .leftBox {
      display: inline-block;
      width: 100px;
      height: 100px;
      border: 1px solid black;
      border-radius: 10px;
      position: relative;
    }
 
    .rightBox {
      display: inline-block;
      width: 100px;
      height: 100px;
      border: 1px solid black;
      border-radius: 10px;
      position: relative;
    }
 
    .circle {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: radial-gradient(25px at center, white, skyblue);
      /* 绝对居中 */
      position: absolute;
      left: 50%;
      margin-left: -25px;
      top: 50%;
      margin-top: -25px;
    }
  </style>

js代码:

<script>
  //获取dom元素,分别是左盒子 圆圈 右盒子
  var leftBox = document.querySelector('.leftBox');
  var circle = document.querySelector('.circle');
  var rightBox = document.querySelector('.rightBox');
  var text = document.querySelector('.text');
 
  //移动circle
  circle.
 
  //开启左盒子的移入事件
  leftBox.ondragover = function (event) {
    event.preventDefault();
  }
  leftBox.ondrop = function () {
    leftBox.appendChild(circle);
  }
 
  //开启右盒子的移入事件
  rightBox.ondragover = function (event) {
    event.preventDefault();
  }
  rightBox.ondrop = function () {
    rightBox.appendChild(circle);
  }
 
</script>

JS实现盒子拖拽效果

关于事件的用法,官方用到了object.addEventListener("dragover", myScript)和event.target.id

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
五个jQuery图片画廊插件 推荐
May 12 Javascript
关于javascript function对象那些迷惑分析
Oct 24 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
Jan 19 Javascript
js判断鼠标位置是否在某个div中的方法
Feb 26 Javascript
深入理解js中this的用法
May 28 Javascript
完美实现八种js焦点轮播图(上篇)
Jul 18 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
Jul 10 Javascript
JavaScript常用数组操作方法,包含ES6方法
May 10 Javascript
Echarts之悬浮框中的数据排序问题
Nov 08 Javascript
原生JS实现手动轮播图效果实例代码
Nov 22 Javascript
webpack 最佳配置指北(推荐)
Jan 07 Javascript
JavaScript实现京东快递单号查询
Nov 30 Javascript
JavaScript实现拖拽盒子效果
Feb 06 #Javascript
JS实现“全选”和&quot;全不选&quot;功能代码实例
Feb 06 #Javascript
JavaScript实现好看的跟随彩色气泡效果
Feb 06 #Javascript
详细介绍解决vue和jsp结合的方法
Feb 06 #Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
Feb 06 #Javascript
js get和post请求实现代码解析
Feb 06 #Javascript
Windows下安装 node 的版本控制工具 nvm
Feb 06 #Javascript
You might like
基于Linux调试工具strace与gdb的常用命令总结
2013/06/03 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(二)
2014/06/23 PHP
jQuery 使用手册(二)
2009/09/23 Javascript
jQuery获取动态生成的元素示例
2014/06/15 Javascript
使用js实现数据格式化
2014/12/03 Javascript
js创建数组的简单方法
2016/07/27 Javascript
JS实现拖拽的方法分析
2016/12/20 Javascript
js中的DOM模拟购物车功能
2017/03/22 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
2018/04/12 jQuery
mpvue跳转页面及注意事项
2018/08/03 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
2019/04/11 Javascript
node.js实现上传文件功能
2019/07/15 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
2019/08/12 Javascript
Vue+ElementUI table实现表格分页
2019/12/14 Javascript
pycharm 使用心得(八)如何调用另一文件中的函数
2014/06/06 Python
Python程序中的观察者模式结构编写示例
2016/05/27 Python
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
基于python神经卷积网络的人脸识别
2018/05/24 Python
使用Django2快速开发Web项目的详细步骤
2019/01/06 Python
python删除某个目录文件夹的方法
2020/05/26 Python
python如何代码集体右移
2020/07/20 Python
Python如何实现大型数组运算(使用NumPy)
2020/07/24 Python
HTML5边玩边学(2)基础绘图实现方法
2010/09/21 HTML / CSS
函授毕业生自我鉴定范文
2014/03/25 职场文书
教师个人自我评价范文
2014/04/13 职场文书
知识改变命运演讲稿
2014/05/21 职场文书
初中生旷课检讨书范文
2014/10/06 职场文书
奖学金感谢信
2015/01/21 职场文书
服装区域经理岗位职责
2015/04/10 职场文书
刑事附带民事上诉状
2015/05/23 职场文书
埃及王子观后感
2015/06/16 职场文书
共青团优秀团员申请书(范文)
2019/08/15 职场文书
MySQL性能压力基准测试工具sysbench的使用简介
2021/04/21 MySQL
解决Swagger2返回map复杂结构不能解析的问题
2021/07/02 Java/Android
MYSQL如何查看进程和kill进程
2022/03/13 MySQL
Python面试不修改数组找出重复的数字
2022/05/20 Python