<!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）拖动效果的更多相关文章

  1. js实现一个可以兼容PC端和移动端的div拖动效果

    前段时间写了一个简单的div拖动效果,不料昨天项目上正好需要一个相差不多的需求,就正好用上了,但是在移动端的时候却碰到了问题,拖动时候用到的三个事件:mousedown.mousemove.mouse ...

  2. jquery div拖动效果示例代码

    div拖动效果想必大家都有见到过吧,实现的方法也是有很多的,下面为大家将介绍使用jquery是如何实现的,感兴趣的朋友不要错过 复制代码代码如下: <%@ page language=" ...

  3. js：简单的拖动效果

    效果演示:https://jsfiddle.net/dwqs/b5ywws9f/embedded/result/ html: <div class="wrap"> &l ...

  4. 纯JS写动态分页样式效果

    效果图如下: html: <body> <div> <table id="btnbox"> <tbody> <tr>&l ...

  5. 纯js+css实现loading等待效果

    此插件是基于jqueryUI的widget,下面是具体实现代码 第一部分css: /***loading***/ .loading-box{ position:absolute; text-align ...

  6. 纯js实现DIV拖拽

    写代码的时候遇到需要对绝对布局的div进行拖拽的功能,起初为了省事直接在网上扒拉了一番,看到大神张鑫旭的一篇文章<JavaScript实现最简单的拖拽效果>,便直接拿来使用(膜拜大神).但 ...

  7. HTML 通过js实现div的拖动效果

    最近做项目,碰到一个问题,需要对div实现拖动效果. 在度娘找了很多,要么觉得代码太长,要么就是效果不理想,不过最后还是找到了一个不错的,感谢大神的留贴,方便了我们,就把代码贴下面了: <!DO ...

  8. ［原创］纯JS实现网页中多选复选框checkbox和单选radio的美化效果

    图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...

  9. 纯js和纯css+html制作的手风琴的效果

    一:纯css+html的手风琴效果 这种用css写的手风琴比较简单,主要是应用到css中的,transition属性. 代码如下: <!DOCTYPE HTML> <html> ...

随机推荐

  1. Xcode中C、C++、Object-C3种语言的混编

    转自: http://hi.baidu.com/onejw/item/f34390c997cdc226a1b50ae http://www.cocoachina.com/ask/questions/s ...

  2. 转载收藏之用 - 微信公众平台开发教程（四）：Hello World

    这一篇文章其实可以写在很前面,不过我还是希望开发者们尽多地了解清楚原理之后再下手. 通过上一篇Senparc.Weixin.MP SDK 微信公众平台开发教程(三):微信公众平台开发验证,我们已经使微 ...

  3. SGU176 Flow construction

    http://acm.sgu.ru/problem.php?contest=0&problem=176 有源汇上下界最小流,可以选择跟有源汇上下界最大流一样的建图方式,然后用二分去二分t-&g ...

  4. QT中QProcess调用命令行的痛苦经历（调用Winrar，设置工作目录，获得输出，注意引号与括号，等等）

    QT中QProcess调用命令行的痛苦经历   阅读目录 创建压缩包的方法 在QT中调用命令行 在QT中调用C++创建的dll 在QT程序中需要将某些目录和文件压缩为一个rar的压缩包,于是想到了在Q ...

  5. 【PAT L2-001】最短路计数

    给定一个无向带权网络,无负边,无重边和自环,每个顶点有一个正数权值.首先求特定原点s到终点d的最短路的个数:然后求所有最短路中顶点权值a[i]之和最大的那条,输出这条路径. 可用dijkstra算法求 ...

  6. codevs 1001 舒适的路线 （并查集）

    题目描述 Description Z小镇是一个景色宜人的地方,吸引来自各地的观光客来此旅游观光. Z小镇附近共有 N(<N≤)个景点(编号为1,,,…,N),这些景点被M(<M≤)条道路连 ...

  7. Qt creator自定义编译运行步骤

    一直用Qt creator开发.无它,只是因为linux下C++ IDE选择不多.同时因为我抛弃了MFC,平时写个小工具还得靠Qt,正好一举两用. 用Qt creator开发一般的工程,是不用修改编译 ...

  8. QT文件夹定位（网友提供）

    #ifndef FOLDERFINDER_H #define FOLDERFINDER_H#include <QDir>class FolderFinder{public:    QStr ...

  9. 【转】invokeRequired属性和 invoke()方法

    C#中禁止跨线程直接访问控件,InvokeRequired是为了解决这个问题而产生的,当一个控件的InvokeRequired属性值为真时,说明有一个创建它以外的线程想访问它. 此时它将会在内部调用n ...

  10. [置顶] Application，Session，Cookie之Application对象

    概述 Application为全局作用域,且只有一个Application对象,它可以存储和访问任意页面的变量(数据存储类型都是Object,也就是任意类型),同时也被多页面使用(也为引用). App ...