在开发的时候需要一个可拖拽的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. Linux下iptables总结

    linux下防火墙iptables 工作于网络或主机边缘,对进出本网络或本主机的网络报文安装事先设定好的匹配规则进行检查,对能够被规则所匹配的报文按照规则定义的处理机制进行处理的组件 通常情况下ipt ...

  2. （反NIM)

    题目大意是和普通的NIM游戏一样,但是却是取到最后一个是输的,天真的以为就是反过来,其实并不是这样的 结论 先手必胜的条件为 ①:所有堆的石子数均=1,且有偶数堆. ②:至少有一个堆的石子数>1 ...

  3. 解决tomcat闪退问题

    https://blog.csdn.net/zh2nd/article/details/79068680 转载此博客链接内容,非常感谢博主 本文参考CSDN博主 哈克沃德.的<Tomcat8启动 ...

  4. 【ACM】大数阶乘 - Java BigInteger实现

    大数阶乘 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 我们都知道如何计算一个数的阶乘,可是,如果这个数很大呢,我们该如何去计算它并输出它?   输入 输入一个整数 ...

  5. POJ 3321 Apple Tree DFS序 + 树状数组

    多次修改一棵树节点的值,或者询问当前这个节点的子树所有节点权值总和. 首先预处理出DFS序L[i]和R[i] 把问题转化为区间查询总和问题.单点修改,区间查询,树状数组即可. 注意修改的时候也要按照d ...

  6. Maven的学习资料收集--(五)使用Maven构建Struts2项目

    在前两篇博客中,使用Maven构建了Web项目,在这篇博客中写一下,怎样构建一个简单的Struts2项目. 在准备过程中发现,要使用好Maven,个人觉得要好好利用这两个网站: http://mvnr ...

  7. android 开发DatePickerDialog/TimePickerDialog对话框的实现

    AndroidAPI提供了Dialog对话框控件,DatePickerDialog/TimePickerDialog均是AlertDialog的子类,通过DatePickerDialog/TimePi ...

  8. MySQL分库分表的技巧

    分表是分散数据库压力的好方法. 分表,最直白的意思,就是将一个表结构分为多个表,然后,可以再同一个库里,也可以放到不同的库. 当然,首先要知道什么情况下,才需要分表.个人觉得单表记录条数达到百万到千万 ...

  9. JQuery基础知识==认识JQuery

    jQuery API 中文文档:https://www.jquery123.com/ jQuery Mobile 菜鸟教程:http://www.runoob.com/jquerymobile/jqu ...

  10. [转]latex输入数学符号速查

    基本运算 乘法 x×y x \times y 乘方 23x 2^{3x} 平方根 x+y−−−−−√ \sqrt {x + y} 除法 x÷y x \div y 分数 xy \frac{x}{y} 异 ...