拖动盒子demo
<!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>Document</title>
<style>
.from, .to {
width: 300px;
height: 200px;
background-color: yellowgreen;
}
.box1, .box2 {
width: 100px;
height: 100px;
margin: 10px;
float: left;
background-color: red;
}
</style>
</head>
<body>
<h3>从这个盒子</h3>
<div class="from">
<div class="box1">111</div>
<div class="box2">222</div>
</div>
<h3>到这个盒子</h3>
<div class="to"></div>
</body>
</html>
<script>
//目标盒子
var to = document.querySelector(".to");
var from = document.querySelector(".from");
var box1 = document.querySelector(".box1");
var box2 = document.querySelector(".box2");
var littleBox;
box1.onmousedown = function() {
box1.setAttribute("draggable", true);
littleBox = box1;
}
box2.onmousedown = function() {
box2.setAttribute("draggable", true);
littleBox = box2;
}
//必须实现目标盒子的两个方法
to.ondragover = function(event) {
event.preventDefault();
}
to.ondrop = function() {
this.appendChild(littleBox);
}
//必须实现目标盒子的两个方法
from.ondragover = function (event) {
event.preventDefault();
}
from.ondrop = function () {
this.appendChild(littleBox);
}
</script>
拖动盒子demo的更多相关文章
- 微信小程序列表拖动排序Demo
wxml页面编写 <view class="container"> <view bindtap="box" class="box&q ...
- 可拖拽的3D盒子
代码地址如下:http://www.demodashi.com/demo/11453.html 一直想做一个立体的盒子,前段时间刚好看见掘金上有位朋友发了篇关于3d盒子的文章,看了决定自己做一下, ...
- Android 可拖拽的GridView效果实现, 长按可拖拽和item实时交换
转帖请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/17718579),请尊重他人的辛勤劳动成果,谢谢! 在And ...
- JavaScript之放大镜效果2
在放大图片效果的同时,我们怎么原图和放大窗体增加间隔呢? 我们只需应用一个table就行了: 源码上: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML ...
- js基础第四天
多个tab栏切换class封装 <style> *{margin:0;padding:0;} ul{list-style:none;} .b ...
- touch事件应用
js的touch事件,一般用于移动端的触屏滑动: $(function(){ document.addEventListener("touchmove", _touch, fals ...
- 移动端 slide拖拽
<html> <head> <meta charset="UTF-8"> <meta name="viewport" ...
- jsplumb 中文教程
https://wdd.js.org/jsplumb-chinese-tutorial/#/ 1. jsplumb 中文基础教程 后续更新会在仓库:https://github.com/wangdua ...
- 微信小程序学习指南
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
随机推荐
- PAT_A1115#Counting Nodes in a BST
Source: PAT A1115 Counting Nodes in a BST (30 分) Description: A Binary Search Tree (BST) is recursiv ...
- 如何解决windows docker共享目录不支持符号链接（do not support symlinks）？
windows使用docker toolbox,搭建前端开发环境时,在共享目录使用npm安装前端依赖时,发现报错,无法使用符号连接. 这里有一个帖子专门讨论这个问题,感兴趣可以看一下: https:/ ...
- IDEA返回上一步
在开发中进入一个方法后想要到原来那行 ctrl+alt+左 回到上一步 ctrl+alt+右 回到下一步
- Springmvc中ajax与jason应用
Springmvc中ajax与jason应用 相关依赖包 json数据转换的jar包 jackson-annotations-2.5.4 jackson-core-2.5.4 jackson-data ...
- Oracle 解决表死锁
select 'alter system kill session ''' || SID || ',' || SERIAL# || ''';' from ( select distinct a.sid ...
- vue 对图片进行拖拽到另一个位置
1.拖动元素代码: 使用html5原生拖拽属性,在需要拖拽的图片中添加draggable="true"属性,并使用v-on添加拖动事件 2.被放置的区域事件代码: 使用html5原 ...
- 重新学习html和css
当初学习前端的时候,属于快速入门那种,没有好好深入学习html和css.如今,在空闲时间重新拿起基础书学习,都会写到一些新的知识. 1.css实现圆角.渐变功能.使用border-radius以及li ...
- Spring Boot-全局异常处理(八)
SpringBoot默认异常默认处理机制 Spring boot错误异常时通过BasicErrorController来处理的 通过判断是浏览器请求还是ajax请求响应页面或者json BasicEr ...
- Ubuntu下ss的安装与使用
不得不说,linux真的有种让人用上就爱上的魔力,正好最近Ubuntu出了16.04,便索性装了个win10+Ubuntu的双系统,也算是告慰那永远留在老硬盘里的虚拟机吧. 言归正传,换上Ubuntu ...
- 自己定义ShareSDK分享平台界面
自己定义ShareSDK分享平台界面 执行效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZ2FvX2NodW4=/font/5a6L5L2T/fo ...