拖动盒子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来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
随机推荐
- js 习题
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- Linux C（day01）
Linux是一个和Windows类似的操作系统 通常通过终端软件使用Linux操作系统 终端软件里只能使用键盘不能使用鼠标 可以在终端软件里输入各种命令控制计算机 完成各种任务 clear命令可以清除 ...
- salt 批量添加route路由
安装net-tools包 因为其余机器没有网络,使用rpm包安装,并添加缺省路由. [root@web1 base]# tree . ├── add-route.sls ├── files │ └ ...
- Yii2验证码使用教程
控制器代码 public function actions() { return [ 'captcha' => [ 'class' => 'yii\captcha\CaptchaActio ...
- http://www.phplo.com/special/2013/0616/467.html
http://www.phplo.com/special/2013/0616/467.html
- 【Codeforces 229B】Planets
[链接] 我是链接,点我呀:) [题意] [题解] 设dis[i]表示到达i号传送器的最早时刻. 显然,虽然有那么多的出发时刻的限制,但我们还是越早到越好的. 因为你到得越早,出发的时间肯定不会比到达 ...
- Solr部分更新MultiValued的Date日期字段时报错及解决方案：Invalid Date String:'Mon Sep 14 01:48:38 CST 2015'
问题描述如标题. 异常信息如下: Result Caused by: org.apache.solr.common.SolrException: Invalid Date String:'Mon Se ...
- IE-FSC
Top3: Top2: FSC related to Redis: (Redis = https://www.cnblogs.com/ngtest/p/10693750.html) FSC statu ...
- DJANGO里让用户自助修改邮箱地址
因为在部署过程中会涉及用户邮件发送,如果有的同事不愿意收到太多邮件,则可以自己定义为不存在的邮箱. 我们在注册的时候,也不会写用户邮箱地址,那么他们也可以在这里自己更改. changeemail.ht ...
- [bzoj4127]Abs_树链剖分_线段树
Abs bzoj-4127 题目大意:给定一棵数,支持链加和链上权值的绝对值的和. 注释:$1\le n,m \le 10^5$,$\delta \ge 0$,$|a_i|\le 10^8$. 想法: ...