拖动盒子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来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
随机推荐
- ASP.NET 页面验证cookie
using System; using System.Collections.Generic; using System.Linq; using System.Web; /// <summary ...
- pycharm主题 变量颜色 自定义
File--Settings--Edtior--Color Schame-- Lanuage Defaults
- Webpack 快速上手（下）
杏仁前端开发工程师,代码洁癖症早期,关注前端技术. 由于文章篇幅较长,为了更好的阅读体验,本文分为上.中.下三篇: 上篇介绍了什么是 webpack,为什么需要 webpack,webpack 的文件 ...
- BZOJ 4259: 残缺的字符串 FFT_多项式
Code: #include<bits/stdc++.h> #define maxn 1200000 using namespace std; void setIO(string s) { ...
- 51nod1212 无向图最小生成树
N个点M条边的无向连通图,每条边有一个权值,求该图的最小生成树. Input 第1行:2个数N,M中间用空格分隔,N为点的数量,M为边的数量.(2 <= N <= 1000, 1 < ...
- COOKIE, SESSION, JSESSION
http://www.360doc.com/content/11/1027/10/7472437_159535413.shtml
- react 点击事件+父子传值
接下来要做的效果是,在父组件添加两个按钮,点击后改变父组件传过去的值 父组件 import React, { Component } from 'react'; import Test from '. ...
- phpcms 电脑手机合并
电脑手机端 ========================== <script type="text/javascript"> function browserRed ...
- openc下cv::Mat和IplImage的相互转换
opencv2.0的类CV::Mat和opencv1.0的IplImage之间烦人转换: cv::Mat matimg = cv::imread ("girl.jpg"); Ipl ...
- VC2010常见问题的解决方案
vc++里面的obj文件是什么文件Project(项目)中每个cpp经编译成为obj(object)目标文件,所有obj文件和资源文件经链接(link)成为可执行文件,obj文件可称为目标文件或中间文 ...