在开发的时候需要一个可拖拽的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. Leetcode初级算法(链表篇)

    删除链表的倒数第N个节点 感觉自己对于链表的知识还是了解的不够深入,所以没有想到用双指针进行操作.我的想法是这样的,首先计算整个链表的长度,然后遍历到长度减去n的节点处,执行删除操作. 自己的代码: ...

  2. Codeforces 1161B（判断旋转对称）

    要点 外层暴力枚举转的"角度",会发现肯定是n的约数 对于m条线段想判定当前的"角度"是否ok,每个线段只要管它自己的下一个即可,不必画个圈遍历一遍 之后将本来 ...

  3. Tomcat从socket到java Servlet

    整体架构图 一. 启动阶段 BootStrap的main方法加载server.xml配置文件,封装成Server,Service,Connector,Engine等java对象 Server初始化== ...

  4. Sandcastle Help File Builder 生成NET帮助文档

    Sandcastle是微软提供的一个根据XML注释和DLL文件生成帮助文件的工具,目前是在CodePlex上的一个开源项目,可以去这里下载:Sandcastle Sandcastle生成的输出结果具有 ...

  5. upper_bound和lower_bound的用法

    首先介绍这两种函数是什么意思 upper_bound是找到大于t的最小地址,如果没有就指向末尾 lower_bound是找到大于等于t的最小地址 题目链接:https://vjudge.net/con ...

  6. ${openid_wx} el解析式放入url的“”里才起作用。

    window.location.href="${ctx }/wx/reservation/content?shopid="+shopid+"&&openi ...

  7. CAST 变类型，如 SELECT CAST('12' AS int)

    select distinct CAST(value as signed) valueprice,CAST(value as signed) valueid from app_coupon

  8. Oozie安装的说明

    不多说,直接干货! Oozie相当于Hadoop的一个客户端,因此集群中要有一台机器部署Oozie server端即可,由于可以有任意多个客户端连接Oozie,故每个客户端都必须部署Oozie cli ...

  9. ERROR [org.apache.hadoop.util.Shell] - Failed to locate the winutils binary in the hadoop binary path

    错误日志如下: -- ::, DEBUG [org.apache.hadoop.metrics2.lib.MutableMetricsFactory] - field org.apache.hadoo ...

  10. SQLServer常见性能问题

    1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索 ...