js可以随意拖拽的div的实现

时间：2022-09-15 11:05:49
<!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&period;js实现文件拖拽上传

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

随机推荐

  1. 踩石行动：ViewPager无限轮播的坑

    2016-6-19 前言 View轮播效果在app中很常见,一想到左右滑动的效果就很容易想到使用ViewPager来实现.对于像我们常说的banner这样的效果,具备无限滑动的功能是可以用ViewPa ...

  2. RDLC 设置标题每页显示

  3. &lbrack;转载&rsqb;高效使用matlab之四：一个加速matlab程序的例子

    原文地址:http://www.bfcat.com/index.php/2012/11/speed-up-app/ 这篇文章原文是matlab网站上的,我把它翻译过来同时自己也学习一下.原文见这里 这 ...

  4. DAC杂谈二 ——ADC和DAC常用技术术语

    采集时间 采集时间是从释放保持状态(由采样-保持输入电路执行)到采样电容电压稳定至新输入值的1 LSB范围之内所需要的时间.采集时间(Tacq)的公式如下: 混叠 根据采样定理,超过奈奎斯特频率的输入 ...

  5. Linux 安装vsftpd和ftp客户端

    1.下载安装包:ftp-0.17-54.el6.x86_64.zip和vsftpd-2.2.2-11.el6_4.1.x86_64.zip 可以直接在Linux底下用yum install vsftp ...

  6. leetcode448

    public class Solution { public IList<int> FindDisappearedNumbers(int[] nums) { Dictionary<i ...

  7. GPS卫星定位防盗系统机芯

    GPS卫星定位防盗系统机芯,一般安装在驾驶室的操作台内,包括GPS模块,安装时需要先把车门打开,并把两边的车门拆卸下来,才能拆卸驾驶仪表台,再按说明书安装GPS定位防盗机芯,同时置于4A/12V免维护 ...

  8. 基于NABCD评论&OpenCurlyDoubleQuote;探路者”Alpha版作品

    1.分析 N(Need):”为了重温贪吃蛇这一经典游戏,本组的选题定为贪吃蛇游戏,并在此基础上进行了新的创新,将普通的贪吃蛇游戏改为单词版贪吃蛇.市面上的英语单词背记软件对于那些缺少英语学习兴趣.毅力 ...

  9. 抓取网页数据C&num;文件

    using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mv ...

  10. Alpha阶段展示

    程序员杀产品经理祭天(SacrificePM)团队 1.团队成员简介和个人博客地址 故事 我们队伍的建立过程稍具戏剧性,大家看我们也颇为奇怪,这么一支8人队伍是怎么诞生的呢?其实我们原本分属三组,而第 ...

相关文章