在开发的时候需要一个可拖拽的prompt弹框。自己写了一个，大概思路为：

1.获取鼠标左键按下移动的起点坐标（x,y）。

2.获取div的left和top属性。

3.得到鼠标坐标到左上角的距离（x-top,y-top）

　　然后不多啰嗦，看代码。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title> 拖拽 </title>

<meta name="Generator" content="EditPlus">

<meta name="Author" content="">

<meta name="Keywords" content="">

<meta name="Description" content="">

<meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport">

</head>

<style type="text/css">

*{padding:0;margin:0}

body{width:100%;height:100%;margin:0 auto;background:rgb(151,223,185)}

html,body{margin:0;width:100%;height:100%}

dv1{width:200px;height:30px;background:silver}

#box{position:absolute;left:300px;top:100px;padding:5px;background:#f0f3f9;font-size:15px;-moz-box-shadow:2px 2px 4px #666666;-webkit-box-shadow:2px 2px 4px #666666;}

#main{border:1px solid #a0b3d6;background:#beceed;border-bottom:1px solid #a0b3d6;padding:5px 1px;cursor:move;}

#content{width:420px;height:250px;padding:10px 5px;border:1px solid #beceed}

</style>

<script type="text/javascript">

<!--

var dv1 = document.getElementsByTagName("div");

var isdrag = false;//拖拽标识

var x=0,y=0;//当前鼠标坐标

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

var t1=0;//定时

window.onload = function()

{

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

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

var browser=navigator.appName;

var b_version=navigator.appVersion;

var version=parseFloat(b_version);

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

sp1.innerHTML="浏览器名称："+ browser+"<br/>"+"浏览器版本："+ version;

addEvent(main,"mousedown",mousedown);

addEvent(window,"mouseup",mouseup);

onmousemove = function(event)

{

if(isdrag && event.button==0)

{

var left = 0;

var top = 0;

x=event.clientX;

y=event.clientY;

if(t1==0){　　//获取刚开始移动的鼠标到左上角的距离

dv1[0].innerHTML = x-box.offsetLeft;

dv1[1].innerHTML = y-box.offsetTop;

}

t1 = setTimeout(checkDrag,10);

left = x - dv1[0].innerHTML;

top = y - dv1[1].innerHTML;

box.style.left = left+"px";

box.style.top=top+"px";

}

}

}

function mousedown(event){

if(event.button>0)return;    //只能左键动作

isdrag = true;

x=event.clientX;

y=event.clientY;

}

function mouseup(event){

isdrag = false;

t1=0;

}

/***

*自定义绑定事件方法

*obj--绑定事件对象

*type--事件名称

*fn--事件执行的函数

*/

function addEvent(obj,type,fn){

if(obj.addEventListener){

obj.addEventListener(type,fn,false);

}else if(obj.attachEvent){

obj.attachEvent('on'+type,fn);

}

}

function checkDrag(){}//setTimeout调用空函数

//-->

</script>

<body>

<div id="dv1">300</div>

<div id="dv2">100</div>

<span id="sp1"></span>

<div id="box" style="left:300px;top:100px">

<div id="main" >拖拽</div>

<div id="content">

内容......

</div>

</div>

</body>

</html>

一个简单的div拖拽效果，最后进行需要的样式处理和事件处理即可得到自定义prompt弹出框（这里不再写出）。

纯碎为了学习和记录。

可拖拽div的更多相关文章

  1. 简洁的drag效果，自由拖拽div的实现及注意点

    偶然间看到了以前做的一个简洁的div拖拽效果,修改了一下加点注释,经测试完美通过firefox/chrome/ie6-11,现拿来分享一下. 先说一下实现原理及要点,最主要的有三步.第一步是mouse ...

  2. 理解事件捕获。在限制范围内拖拽div+吸附+事件捕获

    一.实现的效果是在限制范围内拖拽div+吸附+事件捕获. 这里需要理解的是事件捕获,这个事件捕获也是为了兼容div在拖拽过程中,文本不被选中这个问题. 如此良辰美景,拖拽也可以很洒脱哈.先看看图, 二 ...

  3. JS拖拽div（移动）

    <!doctype html><html><head> <meta charset="utf-8"> <title>JS ...

  4. JS之scrollTop、offsetHeight和offsetTop等属性用法详解和拖拽div

    标题中的几个相关相关属性在网页中有这大量的应用,尤其是在运动框架中,但是由于有些属性相互之间的概念比较混杂或者浏览器兼容性问题,导致掌握起来比较有难度,下面就介绍一下相关属性的用法.先来看一张比较经典 ...

  5. 自由拖拽DIV实现

    最近在做的项目有个效果是要实现div随意拖拽改变大小,前端框架选择的是vue.js,UI用的是element,拖拽效果可以很简单的实现,但是在拖拽过程中发现会对其他元素实现全选效果,因此最后选择使用元 ...

  6. 点滴积累【JS】---JS小功能（onmousedown实现鼠标拖拽div移动）

    效果: 思路: 利用onmousedown事件实现拖拽.首先获得鼠标横坐标点和纵坐标点到div的距离,然后当鼠标移动后再用可视区的距离减去横纵坐标与div的距离.然后在判断不让DIV移出可视区,然后再 ...

  7. dom 拖拽div

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 如何拖拽DIV边线并左右自适应改变大小？

    //树图拉伸    jQuery(function ($){                  var doc = $(document), dl = $(".side-tree" ...

  9. js实现可拖拽的div

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

随机推荐

  1. ACM-ICPC 2018 南京赛区网络预赛 B. The writing on the wall

    题目链接:https://nanti.jisuanke.com/t/30991 2000ms 262144K   Feeling hungry, a cute hamster decides to o ...

  2. Java文件与io——NewIO

    为啥要使用NIO? NIO的创建目的是为了让JAVA程序员可以实现高速I/O而无需编写自定义的本机代码.NIO将最耗时的I/O操作(即填充和提取缓冲区)转移回操作系统,因而可以极大地提高速度 流与快的 ...

  3. 【Linux】Xshell-Linux常用命令

    (1)命令ls——列出文件 ls -la 给出当前目录下所有文件的一个长列表,包括以句点开头的“隐藏”文件 ls a* 列出当前目录下以字母a开头的所有文件 ls -l *.doc 给出当前目录下以. ...

  4. 汇编语言版本的HelloWorld

    平台 macOS 工具 nasm clang 文件 main.asm extern _printf ; 这里调用系统的一个系统调用函数, _printf, 使用extern告诉链接器该label在其他 ...

  5. 使用PM2守护Node.js应用

    PM2简介 PM2是node进程管理工具,可以利用它来简化很多node应用管理的繁琐任务,如性能监控.自动重启.负载均衡等,而且使用非常简单.   安装PM2 $ npm install pm2 -g ...

  6. 常见SQL优化方法

    SQL优化的一些方法 1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否 ...

  7. git 如何生成 SSH 公钥

    1.打开你的git bash 窗口 2.进入.ssh目录:cd ~/.ssh 3.找到id_rsa.pub文件:ls 4.查看公钥:cat id_rsa.pub    或者vim id_rsa.pub ...

  8. pandas：数据分析

    一.介绍 pandas是一个强大的Python数据分析的工具包,是基于NumPy构建的. 1.主要功能 具备对其功能的数据结构DataFrame.Series 集成时间序列功能 提供丰富的数学运算和操 ...

  9. django Q条件

    #q条件from django.db.models import Qq = Q(name__startswith="p") | Q(name__startswith="l ...

  10. django ORM 简单示例简绍

    简单 models 操作 class Host(models.Model): nid = models.AutoField(primary_key=True) #Nid为主键 hostname = m ...