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 相关文章推荐
Prototype使用指南之base.js
Jan 10 Javascript
JQuery 前台切换网站的样式实现
Jun 22 Javascript
jQuery简单图表peity.js使用示例
May 02 Javascript
Javascript中浮点数相乘的一个解决方法
Jun 03 Javascript
js字符串完全替换函数分享
Dec 03 Javascript
jquery延迟对象解析
Oct 26 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
微信小程序实现图片上传、删除和预览功能的方法
Dec 18 Javascript
快速处理vue渲染前的显示问题
Mar 05 Javascript
bootstrap下拉框动态赋值方法
Aug 10 Javascript
JavaScript一元正号运算符示例代码
Jun 30 Javascript
JavaScript页面加载事件实例讲解
Sep 01 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
JpGraph php柱状图使用介绍
2011/08/23 PHP
在Debian系统下配置LNMP的教程
2015/07/09 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
Mac下快速搭建PHP开发环境步骤详解
2019/05/05 PHP
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
2013/06/09 Javascript
Javascript中匿名函数的多种调用方式总结
2013/12/06 Javascript
JQuery对表单元素的基本操作使用总结
2014/07/18 Javascript
JavaScript中匿名函数的用法及优缺点详解
2016/06/01 Javascript
详解Angualr 组件间通信
2017/01/21 Javascript
AngularJS的ng-click传参的方法
2017/06/19 Javascript
angular中的cookie读写方法
2017/08/02 Javascript
微信小程序实现上传图片裁剪图片过程解析
2019/08/22 Javascript
JS数组的高级使用方法示例小结
2020/03/14 Javascript
vue-cli3使用mock数据的方法分析
2020/03/16 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
2020/09/02 Javascript
[28:07]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第二场 12.13
2020/12/17 DOTA
对Python 网络设备巡检脚本的实例讲解
2018/04/22 Python
Python assert关键字原理及实例解析
2019/12/13 Python
Django密码存储策略分析
2020/01/09 Python
Python3 获取文件属性的方式(时间、大小等)
2020/03/12 Python
python函数超时自动退出的实操方法
2020/12/28 Python
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
2014/04/08 HTML / CSS
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
2016/01/27 HTML / CSS
新西兰珠宝品牌:Michael Hill
2017/09/16 全球购物
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
财务部岗位职责
2013/11/19 职场文书
商务日语专业自荐信
2014/04/17 职场文书
优秀共产党员先进事迹材料
2014/05/06 职场文书
大班亲子运动会方案
2014/06/10 职场文书
个人股份转让协议书范本
2014/10/26 职场文书
苦儿流浪记读书笔记
2015/07/01 职场文书
酒店厨房管理制度
2015/08/06 职场文书
2019年12月24日平安夜祝福语集锦
2019/12/24 职场文书
【海涛教你打dota】体验一超神发条:咱是抢盾专业户
2022/04/01 DOTA