<!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的更多相关文章

  1. 微信小程序列表拖动排序Demo

    wxml页面编写 <view class="container"> <view bindtap="box" class="box&q ...

  2. 可拖拽的3D盒子

    代码地址如下:http://www.demodashi.com/demo/11453.html   一直想做一个立体的盒子,前段时间刚好看见掘金上有位朋友发了篇关于3d盒子的文章,看了决定自己做一下, ...

  3. Android 可拖拽的GridView效果实现, 长按可拖拽和item实时交换

    转帖请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/17718579),请尊重他人的辛勤劳动成果,谢谢! 在And ...

  4. JavaScript之放大镜效果2

    在放大图片效果的同时,我们怎么原图和放大窗体增加间隔呢? 我们只需应用一个table就行了: 源码上: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML ...

  5. js基础第四天

    多个tab栏切换class封装 <style>         *{margin:0;padding:0;}         ul{list-style:none;}         .b ...

  6. touch事件应用

    js的touch事件,一般用于移动端的触屏滑动: $(function(){ document.addEventListener("touchmove", _touch, fals ...

  7. 移动端 slide拖拽

    <html> <head> <meta charset="UTF-8"> <meta name="viewport" ...

  8. jsplumb 中文教程

    https://wdd.js.org/jsplumb-chinese-tutorial/#/ 1. jsplumb 中文基础教程 后续更新会在仓库:https://github.com/wangdua ...

  9. 微信小程序学习指南

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

随机推荐

  1. eas之dep的前置脚本和后置脚本

    dep的前置脚本和后置脚本,什么时候写,是这样解释的:    前置脚本是在方法前执行,后置脚本是在方法后执行    1.比如保存扩展,如果你要在保存前校验某个字段的值,你要在前置脚本中写,如果要保存后 ...

  2. 【剑指Offer】45、扑克牌顺子

      题目描述:   LL今天心情特别好,因为他去买了一副扑克牌,发现里面居然有2个大王,2个小王(一副牌原本是54张^_^)...他随机从中抽出了5张牌,想测测自己的手气,看看能不能抽到顺子,如果抽到 ...

  3. Clocksource tsc unstable

    内核在启动过程中会根据既定的优先级选择时钟源.优先级的排序根据时钟的精度与访问速度. 其中CPU中的TSC寄存器是精度最高(与CPU最高主频等同),访问速度最快(只需一条指令,一个时钟周期)的时钟源, ...

  4. 47.serch基本语法

    主要知识点 1._search api基本语法 2.http协议中get请求带上request body     一.search api的基本语法     1.GET /_search {所传递的参 ...

  5. PAT 1072. Gas Station

    A gas station has to be built at such a location that the minimum distance between the station and a ...

  6. Spring学习总结(2)——Spring的常用注解

    本文汇总了Spring的常用注解,以方便大家查询和使用,具体如下: 使用注解之前要开启自动扫描功能 其中base-package为需要扫描的包(含子包). ? 1 <context:compon ...

  7. Porting from Oracle to MySQL

    A potential customer asked my about porting her application from Oracle Database to MySQL. I always ...

  8. 修改电脑名称后,Oracle客户端连不上

    有以下几个步骤可以尝试,帮助大家缩小错误范围. 1  命令窗口使用sqlplus查看数据库服务是否正常,如下图,没有出现“连接到:”表示数据库服务不正常. 2  在任务管理器中查看数据库的监听是否已经 ...

  9. ExtJs之ExtJs.Model验证

    没有搞好,但知道意思和配置,并且好像4和3的没有兼容性语法,所以网上找了新语法才出来了点东东. <!DOCTYPE html> <html> <head> < ...

  10. mongodb--find基础用法

    聚集集合查询 1.查询所有记录 db.userInfo.find(); 相当于:select* from userInfo; 默认每页显示20条记录,当显示不下的情况下,可以用it迭代命令查询下一页数 ...