纯js实现积木（div）拖动效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖动</title>
<style type="text/css">
</style>
</head>
<body id="content">
<input type="button" value="获取积木" id="div3"/>
</body>
<script>
//生成积木
document.getElementById("div3").onclick=function(){
var num = getnumber();
var num1 = getnumber();
var num2 = getnumber();
var num3 = getnumber();
var divs = '<div id="s'+num+'"style="width: 200px;height: 200px;position: absolute;background:rgb('+num1+','+num2+','+num3+')"></div>'
document.getElementById("content").insertAdjacentHTML("beforeEnd",divs);
darg1("s"+num+"");
};
//h获取随机数，获取随机颜色
function getnumber(){
return parseInt(Math.random()*255);
}
//拖动积木
function darg1(id){
var obj = document.getElementById(id);
var objx = 0;
var objy = 0;
obj.onmousedown = function(even){
//鼠标到div的距离
objx = even.clientX - obj.offsetLeft;
objy = even.clientY - obj.offsetTop;
//div移动的距离 = 鼠标到父窗口的距离 - 鼠标到div的距离
document.onmousemove = function(even){
obj.style.left = even.pageX-objx+'px';
obj.style.top = even.pageY-objy+'px';
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
};
};
return false;
} </script>
<html>
点击button按钮，获取积木,获取积木后可以在浏览器内随意拖动生成的积木:
纯js实现积木（div）拖动效果的更多相关文章
- js实现一个可以兼容PC端和移动端的div拖动效果
前段时间写了一个简单的div拖动效果,不料昨天项目上正好需要一个相差不多的需求,就正好用上了,但是在移动端的时候却碰到了问题,拖动时候用到的三个事件:mousedown.mousemove.mouse ...
- jquery div拖动效果示例代码
div拖动效果想必大家都有见到过吧,实现的方法也是有很多的,下面为大家将介绍使用jquery是如何实现的,感兴趣的朋友不要错过 复制代码代码如下: <%@ page language=" ...
- js：简单的拖动效果
效果演示:https://jsfiddle.net/dwqs/b5ywws9f/embedded/result/ html: <div class="wrap"> &l ...
- 纯JS写动态分页样式效果
效果图如下: html: <body> <div> <table id="btnbox"> <tbody> <tr>&l ...
- 纯js+css实现loading等待效果
此插件是基于jqueryUI的widget,下面是具体实现代码 第一部分css: /***loading***/ .loading-box{ position:absolute; text-align ...
- 纯js实现DIV拖拽
写代码的时候遇到需要对绝对布局的div进行拖拽的功能,起初为了省事直接在网上扒拉了一番,看到大神张鑫旭的一篇文章<JavaScript实现最简单的拖拽效果>,便直接拿来使用(膜拜大神).但 ...
- HTML 通过js实现div的拖动效果
最近做项目,碰到一个问题,需要对div实现拖动效果. 在度娘找了很多,要么觉得代码太长,要么就是效果不理想,不过最后还是找到了一个不错的,感谢大神的留贴,方便了我们,就把代码贴下面了: <!DO ...
- ［原创］纯JS实现网页中多选复选框checkbox和单选radio的美化效果
图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...
- 纯js和纯css+html制作的手风琴的效果
一:纯css+html的手风琴效果 这种用css写的手风琴比较简单,主要是应用到css中的,transition属性. 代码如下: <!DOCTYPE HTML> <html> ...
随机推荐
- 分治算法求乘方a^b 取余p（divide and conquer）
传统的计算方法为循环n个a相乘.时间复杂度为O(n). 如用分治算法,效率可提升至O(lgn). 结合recursive有 double pow(int a, int n){ ) ; ) return ...
- awk的接口实现方案1
module/a.awk function sum(a, b) { return a + b } module/b.awk function sum(a, b) { return a * b } ma ...
- [Codeforces Round #186 (Div. 2)] B. Ilya and Queries
B. Ilya and Queries time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
- C 程序提升效率的10种方法
本文向你介绍规范你的C代码的10种方法(引用地址http://forum.eepw.com.cn/thread/250025/1). 1. 避免不必要的函数调用 考虑下面的2个函数: void s ...
- jsp跳转到servlet
web.xml中url-pattern的值必须和相关联的jsp页面form中的action的值一样,才会从jsp页面跳转到servlet.
- LeetCode_Pascal's Triangle II
Given an index k, return the kth row of the Pascal's triangle. For example, given k = 3, Return [1,3 ...
- LeetCode_N-Queens II
Follow up for N-Queens problem. Now, instead outputting board configurations, return the total numbe ...
- oracle pipelined返回值函数 针对数据汇总统计 返回结果集方法
近期需要一个汇总统计,由于数据太多,数据量太大所以在java程序中实现比较困难.若用后台程序统计,数据不能保证实时,同时实现周期比较长.顾使用函数返回结果集的方式,在不增加临时表的情况下实时获取数据. ...
- POJ3630——简单Trie树
这个题的意思是说,给出一些字符串,判断是否有字符串是另一个字符串的前缀,当然可以用排序水过,不过这个题拿来练习一下Trie树不错. 这个题在poj的discuss上好多人说必须要静态建树,估计都是用了 ...
- Android学习笔记__1__Android体系架构
Android 体系结构图 Android作为一个移动设备的平台,其软件层次结构包括了一个操作系统(OS),中间件(MiddleWare)和应用程序(Application).根据Android的软件 ...