拖动盒子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来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
随机推荐
- layui 下拉框取值
layui.use('form', function () { var form = layui.form; form.on('select(Status)', function (data) { c ...
- C 预处理程序指令（CPP）
#include 文件 提供的东西 stdio 提供 FILE.stdin.stdout.stderr 和 fprintf() 函数系列 stdlib 提供 malloc().calloc()和 re ...
- 使用JAVA写一个简单的日历
JAVA写一个简单的日历import java.text.DateFormat;import java.text.ParseException;import java.text.SimpleDateF ...
- 【WPS】表格使用VBA宏编程写入ini文件实现软件多语言
前言:公司软件最近在做多语言版本,而又来一个西班牙文版本的,之前已经做过中文版本,英文版本和法文版本,之前是同事做的,现在安排我做,之前的做法,使用wps表格,翻译好,然后一个一个复制粘贴到ini文件 ...
- CSS设置input默认样式
HTML <ul class="box"> <li> <input type="checkbox" name="vehi ...
- C++string和int的相互转化
本方法主要利用sstream头文件中的方法来进行转换 1.int转成string #include <iostream> #include<string> #include&l ...
- C# 实现串口发送数据（不用串口控件版）
参考:https://blog.csdn.net/mannix_lei/article/details/79979432 https://www.cnblogs.com/ElijahZeng/p/76 ...
- @Zookeeper可视化工具。 ZK 安装 node-zk-browser。2015.10.22亲测可用
zookeeper基本是基于API和console进行znode的操作,并没有一个比较方便的操作界面,这里也发现了taobao 伯岩写的一个工具,可以比较方便的查询zookeeper信息. 工具的开发 ...
- Spring Boot项目在Mac下使用Maven启动时碰到的神奇问题：Unregistering JMX-exposed beans on shutdown
错误如下: ➜ springboottest1 mvn spring-boot:run [INFO] Scanning for projects... [INFO] [INFO] ---------- ...
- android 集成支付宝app支付(原生态)-包括android前端与java后台
本文讲解了 android开发的原生态app集成了支付宝支付, 还提供了java后台服务器处理支付宝支付的加密代码, app前端与java后台服务器使用json数据格式交互信息,java后台服务主要用 ...