<!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. swift 2.0 语法 循环

    //: Playground - noun: a place where people can play import UIKit /*: for循环 * 基本用法和OC一致 * 条件表达式必须是bo ...

  2. UIView convertRect

    CGRect newRect = [self.view.window convertRect:self.blueView.frame fromView:self.redView]; NSLog(@&q ...

  3. PHPthinking官方论坛招募版主

    时间飞逝.就在昨天,我们PHPthinking的官方论坛刚刚上线了我们自己的论坛! 欢迎大家注冊账号,活跃在论坛的大家庭中,我们会及时关注论坛公布的全部内容.在开发学习的过程中,遇到的不论什么问题,有 ...

  4. ios dyld: Library not loaded: @rpath/xxx.framework/xxx 之根本原因

    碰到问题 dyld: Library not loaded: @rpath/xxx.framework/xxx Referenced from: /var/containers/Bundle/Appl ...

  5. innerHTML和createTextNode的区别

    innerHTML的用法 tablerowObject.innerHTML createTextNode的用法 createTextNode(data) 返回新创建的 Text 节点,表示指定的 da ...

  6. web中servletcontext和applicationContext

    参看:http://www.cnblogs.com/isisbenben/p/5594323.html servletContext和ApplicationContext有什么区别 servletCo ...

  7. Android CountDownTimer的使用

    官方提供的用法如下: new CountDownTimer(30000, 1000) { public void onTick(long millisUntilFinished) { mTextFie ...

  8. CF19 E Fairy——树上差分

    题目:http://codeforces.com/contest/19/problem/E 先把图连成一棵树,然后对于每条非树边,判断它是在奇环中还是偶环中: 把环上的点打上相应的差分标记,并记录有多 ...

  9. 9.10NOIP模拟题

      9.10 NOIP模拟赛 题目名称 区间 种类 风见幽香 题目类型 传统 传统 传统 可执行文件名 section kinds yuuka 输入文件名 section.in kinds.in yu ...

  10. WCF 通讯标准绑定

    WCF 通讯标准绑定 一.预定义标准绑定 标准绑定 说明 BasicHttpBinding BasicHttpBinding 绑定用于最广泛的互交操作,针对第一代Web服务,所使用的传输协议是HTTP ...