拖动盒子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来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
随机推荐
- 身份认证防止重放攻击的challenge-response方法
或者叫询问-应答机制. 基于挑战/应答(Challenge/Response)方式的身份认证系统就是每次认证时认证服务器端都给客户端发送一个不同的"挑战"字串,客户端程序收到这个& ...
- js遍历对象属性
对象虽然与数组一样,都是数据的集合. 因为对象中的数据是处于无序状态,不能像数组那样,使用下标来遍历对象的所有属性. 如果要遍历对象属性,就必须要使用for in 语句. var a={ A1=180 ...
- Tomcat内存分析相关方法(jmap和mat)
Linux环境命令行 首先,根据进程命令,获取运行的tomcat的进程ID ps aux | grep tomcat | grep java | grep bsc 在第二列可以看到进程ID 然后使用j ...
- BZOJ 3319: 黑白树 树+并查集+未调完+神题
Code: #include<bits/stdc++.h> #define maxn 1000003 using namespace std; char *p1,*p2,buf[10000 ...
- Django--form组件cookie/session
Field required=True, 是否允许为空 widget=None, HTML插件 label=None, 用于生成Label标签或显示内容 initial=None, 初始值 help_ ...
- softmax回归---sigmoid（1）
介绍softmax之前先讲讲sigmoid: 逻辑回归模型常用的函数:sigmoid函数(用来做二分类) 表达式:f(x)=L/(1+exp-k(x-x0)) 其图像: 本质:将一个真值映射到(0,1 ...
- VBS正则表达式
删除字符串中指定的内容 Dim pathStr, newPathStr pathStr = "c:\windows;%My%\tool;e:\test;%Tg%\ff;d:\mm" ...
- 配置Jupyter
前几天见同学有用Jupyter notebook的,有点喜欢,于是今天自己配了一下. Jupyter是一个非常好用编辑器,因为Jupyter notebook 不仅可以编写代码运行,并且可以直接在代码 ...
- 实验吧writeup
后台登录 1.看源码有这样一段php代码<!-- $password=$_POST['password']; $sql = "SELECT * FROM admin WHERE use ...
- SQLSERVER2017 链接数据库不行
以为作业要把mysql 数据导入sqlserver,自己装了sqlserver2017, 通过ODBC 来先创建ODBC,mysql的数据库然后测试成功后,在sqlserver创建链接数据库,一直有问 ...