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 实现无缝滚动 兼容IE和FF
Jul 15 Javascript
js跨域问题之跨域iframe自适应大小实现代码
Jul 17 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
Apr 16 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
Jun 14 Javascript
JavaScript实现找出数组中最长的连续数字序列
Sep 03 Javascript
javascript跨域的方法汇总
Oct 23 Javascript
使用JS读取XML文件的方法
Nov 25 Javascript
微信小程序中单位rpx和rem的使用
Dec 06 Javascript
解读vue生成的文件目录结构及说明
Nov 27 Javascript
javascrit中undefined和null的区别详解
Apr 07 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
Dec 20 Javascript
关于antd tree 和父子组件之间的传值问题(react 总结)
Jun 02 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
对盗链说再见...
2006/10/09 PHP
php 删除cookie和浏览器重定向
2009/03/16 PHP
PHP 超链接 抓取实现代码
2009/06/29 PHP
解析php addslashes()与addclashes()函数的区别和比较
2013/06/24 PHP
ThinkPHP字符串函数及常用函数汇总
2014/07/18 PHP
PHP session文件独占锁引起阻塞问题解决方法
2015/05/12 PHP
CodeIgniter配置之database.php用法实例分析
2016/01/20 PHP
php数据访问之查询关键字
2016/05/09 PHP
PHP实现链式操作的原理详解
2016/09/16 PHP
[原创]php集成安装包wampserver修改密码后phpmyadmin无法登陆的解决方法
2016/11/23 PHP
php 微信开发获取用户信息如何实现
2016/12/13 PHP
Javascript结合css实现网页换肤功能
2009/11/02 Javascript
node.js中的favicon.ico请求问题处理
2014/12/15 Javascript
JS+DIV实现鼠标划过切换层效果的方法
2015/05/25 Javascript
AngularJS基础 ng-show 指令简单示例
2016/08/03 Javascript
详解AngularJS controller调用factory
2017/05/19 Javascript
微信小程序实现动态获取元素宽高的方法分析
2018/12/10 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
JavaScript实现随机点名器
2020/03/25 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
[06:38]DOTA2怒掀电竞风暴 2013Chinajoy
2013/07/27 DOTA
[01:28]2014DOTA2国际邀请赛中国区预选赛四大豪门直升机抵达会场
2014/05/24 DOTA
python-docx修改已存在的Word文档的表格的字体格式方法
2018/05/08 Python
python抖音表白程序源代码
2019/04/07 Python
python简单实现矩阵的乘,加,转置和逆运算示例
2019/07/10 Python
Python使用matplotlib 模块scatter方法画散点图示例
2019/09/27 Python
python通过opencv实现图片裁剪原理解析
2020/01/19 Python
俄罗斯的精英皮具:Wittchen
2018/01/29 全球购物
美国迪克体育用品商店:DICK’S Sporting Goods
2018/07/24 全球购物
计算机专业推荐信范文
2013/11/27 职场文书
企业消防安全制度
2014/02/02 职场文书
文化活动实施方案
2014/03/28 职场文书
政风行风评议整改方案
2014/09/15 职场文书
新郎答谢词
2015/01/04 职场文书
Vue Element UI自定义描述列表组件
2021/05/18 Vue.js
Java版 简易五子棋小游戏
2022/05/04 Java/Android