<!DOCTYPE html>

<html lang="en">

　　<head>

　　　　<meta charset="UTF-8">

　　　　<title>divDrag</title>

　　　　<style>

　　　　　　#div1{

　　　　　　　　width: 300px;

　　　　　　　　height: 300px;

　　　　　　　　background-color: #ccc;

　　　　　　　　/*一定要绝对定位*/

　　　　　　　　position: absolute;

　　　　　　}

　　　　</style>

　　</head>

　　<body>

　　　　<div id="div1"></div>

　　　　<script src="drag.js"></script>

　　</body>

</html>

window.onload = function(){

　　var div1 = document.getElementById("div1");

　　div1.onmousedown = function(ev){

　　　　var oevent = ev || event;

　　　　var distanceX = oevent.clientX - div1.offsetLeft;

　　　　var distanceY = oevent.clientY - div1.offsetTop;

　　　　document.onmousemove = function(ev){

　　　　　　var oevent = ev || event;

　　　　　　div1.style.left = oevent.clientX - distanceX + 'px';

　　　　　　div1.style.top = oevent.clientY - distanceY + 'px';

　　　　};

　　　　document.onmouseup = function(){

　　　　　　document.onmousemove = null;

　　　　　　document.onmouseup = null;

　　　　};

　　;

};

js可以随意拖拽的div的实现的更多相关文章

  1. js实现可拖拽的div

    前言 下午忙里偷闲想写一个可拖拽的例子,留在脑海里一直都是三个事件mouseDown,mouseUp,mouseMove, 但从没有动手实践过,今天想起了自己实践了并学习了张鑫旭的demo实现. 学习 ...

  2. 简单的div元素拖拽到div

    drag1 drag2 drag3 代码如下: <!DOCTYPE HTML> <html> <head> <title>div拖拽到div</t ...

  3. JS Event 鼠标拖拽事件

    <!DOCTYPE html><html> <head>        <meta charset="UTF-8">         ...

  4. js插件-简单拖拽

    前端开发的时候,有好多地方用到拖拽效果,当然 http://jqueryui.com/draggable/  是个不错的选择,but 我是个打破砂锅问到底的人,抽点时间用js小小的实现了类似的插件,话 ...

  5. 拖拽改变div的大小

    拖拽改变div的大小 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...

  6. 可以随鼠标拖拽的div

    可以拖拽的div <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  7. php和js实现文件拖拽上传

    Dropzone.js实现文件拖拽上传 http://www.sucaihuo.com/php/1399.html demo http://www.sucaihuo.com/jquery/13/139 ...

  8. 【原创】js实现一个可随意拖拽排序的菜单导航栏

    1.想做这个效果的原因主要是用在UC上看新闻发现他们的导航菜单很有趣.无聊的时候在哪划着玩了很久.所以就干脆自己写一个.原效果如下 2.整体效果如下,在已推荐和未添加里面每个小方块可以触摸移动位置互换 ...

  9. Dropzone.js实现文件拖拽上传

    dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 使用Dropzo ...

随机推荐

  1. Android开发：Eclipse中SqliteManager插件使用

    通常开发Android的时候要使用到数据库操作,会遇到下面小问题: 数据库文件在哪?怎样訪问或操作? 能够通过:打开DDMS->File Explorer看到的sqlite数据库在eclipse ...

  2. hdu5396 Expression 区间dp +排列组合

    #include<stdio.h> #include<string> #include<map> #include<vector> #include&l ...

  3. php 把一个数组分成有n个元素的二维数组的算法

    一.第一种解法 <?php //把一个数组分成几个数组 //$arr 是数组 //$num 是数组的个数 function partition($arr,$num){ //数组的个数 $list ...

  4. bzoj1805: [Ioi2007]Sail 船帆

    可以发现旗杆的顺序是没有用的,对于每列,它的答案是它的最大值mx*(mx+1)/2 高度由小到大排序旗杆,问题可以转化为在前h行选k个最小的值 考虑激情splay乱搞(我只会splay......) ...

  5. Bing Maps进阶系列八：在Bing Maps中集成OpenStreetMap地图

    Bing Maps进阶系列八:在Bing Maps中集成OpenStreetMap地图 OSM(OpenStreetMap-开放街道地图)服务就是一种发布自己地图数据图片为服务的一种实现类型,开放街道 ...

  6. Webservice 的安全策略

      摘自:http://www.cnblogs.com/shengel/archive/2008/11/20/1337723.html   Webservice为作为方便的服务被用广大领域使用的同时, ...

  7. 洛谷P2668斗地主（搜索）noip2015

    题目描述 牛牛最近迷上了一种叫斗地主的扑克游戏.斗地主是一种使用黑桃.红心.梅花.方片的A到K加上大小王的共54张牌来进行的扑克牌游戏.在斗地主中,牌的大小关系根据牌的数码表示如下:3<4< ...

  8. Windows（7/8/10）搭建Elasticsearch 6.x版本

    今天公司用到了Elasticsearch ,记录一下单机版搭建的流程. 首先我们来看下什么是Elasticsearch : ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分 ...

  9. 附加数据库错误代码 - 5120【MSSQL】

    解决方法 数据库所在的文件夹右击打开属性 - 安全 - 给予Authenticated Users用户完全控制权限.然后再附加一次即可成功.

  10. CF414B Mashmokh and ACM

    思路: dp. 实现: 1.O(n5/2) #include <iostream> #include <cstdio> using namespace std; ; ][]; ...