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 相关文章推荐
让你的网站可编辑的实现js代码
Oct 19 Javascript
探讨jQuery的ajax使用场景(c#)
Dec 03 Javascript
jQuery取得select选择的文本与值的示例
Dec 09 Javascript
深入理解javascript原型链和继承
Sep 23 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
Feb 13 Javascript
浅谈JavaScript异常处理语句
Jun 26 Javascript
全面解析Bootstrap排版使用方法(文字样式)
Nov 30 Javascript
js实现图片无缝滚动
Dec 23 Javascript
JS操作input标签属性checkbox全选的实现代码
Mar 02 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
May 09 Javascript
vue实现自定义H5视频播放器的方法步骤
Jul 01 Javascript
Threejs实现滴滴官网首页地球动画功能
Jul 13 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
php中通过数组进行高效随机抽取指定条记录的算法
2013/09/09 PHP
PHP中单引号与双引号的区别分析
2014/08/19 PHP
php类自动加载器实现方法
2015/07/28 PHP
php中引用符号(&amp;)的使用详细介绍
2016/12/06 PHP
BOOM vs RR BO5 第三场 2.14
2021/03/10 DOTA
浅谈JavaScript中面向对象技术的模拟
2006/09/25 Javascript
Mootools 1.2教程 函数
2009/09/15 Javascript
理解Javascript_02_理解undefined和null
2010/10/11 Javascript
js将控件隐藏的方法及display属性介绍
2013/07/04 Javascript
使用JavaScript触发过渡效果的方法
2017/01/19 Javascript
jquery拖动改变div大小
2017/07/04 jQuery
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
2018/08/13 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
2018/08/22 Javascript
React和Vue中监听变量变化的方法
2018/11/14 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
原来JS还可以这样拆箱转换详解
2019/02/01 Javascript
vue实现验证用户名是否可用
2021/01/20 Vue.js
Python多层嵌套list的递归处理方法(推荐)
2016/06/08 Python
超简单使用Python换脸实例
2019/03/27 Python
在pycharm下设置自己的个性模版方法
2019/07/15 Python
Python如何使用正则表达式爬取京东商品信息
2020/06/01 Python
Django 实现图片上传和下载功能
2020/12/31 Python
CSS3近阶段篇之酷炫的3D旋转透视
2016/04/28 HTML / CSS
碧欧泉法国官网:Biotherm法国
2019/10/23 全球购物
struct和class的区别
2015/11/20 面试题
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
java程序员面试交流
2012/11/29 面试题
普罗米修斯教学反思
2014/02/06 职场文书
书法比赛获奖感言
2014/02/10 职场文书
《凡卡》教学反思
2014/04/09 职场文书
不同意离婚代理词
2015/05/23 职场文书
教师考核鉴定意见
2015/06/05 职场文书
寒假生活随笔
2015/08/15 职场文书
技术转让协议书
2016/03/19 职场文书
Shell脚本一键安装Nginx服务自定义Nginx版本
2022/03/20 Servers