在开发的时候需要一个可拖拽的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命令发送Http的get或post请求(curl和wget两种方法)

    Http请求指的是客户端向服务器的请求消息,Http请求主要分为get或post两种,在Linux系统下可以用curl和wget命令来模拟Http的请求.下面就来介绍一下Linux系统如何模拟Http ...

  2. 09.Spring Bean 注册 - BeanDefinitionRegistry

    基本概念 BeanDefinitionRegistry ,该类的作用主要是向注册表中注册 BeanDefinition 实例,完成 注册的过程. 它的接口定义如下: public interface ...

  3. hadoop操作权限问题：WARN util.NativeCodeLoader: Unable to load native-hadoop library for your platform... using builtin-java classes where applicable

    今天想从Eclipse向hdfs上传文件时遇到了一个权限问题,日志如下: ERROR hive.log: Got exception: org.apache.hadoop.security.Acces ...

  4. SpringMVC之用注解控制器(一)

    在传统的Spring MVC开发方法中,必须在Bean配置文件中为每个控制器类配置实例和请求映射和让每个控制器类去实现或者扩展特定于框架的接口或者基类,不够灵活. 如果Spring MVC可以自动侦测 ...

  5. Redis Windows环境搭建

    简介 Redis是一个开源(BSD许可),内存存储的数据结构服务器,可用作数据库,高速缓存和消息队列代理.它支持字符串.哈希表.列表.集合.有序集合,位图,hyperloglogs等数据类型.内置复制 ...

  6. TemplateBinding与Binding区别，以及WPF自定义控件开发的遭遇

    在上一次的文章WPF OnApplyTemplate 不执行 或者执行滞后的疑惑谈到怎么正确的开发自定义控件,我们控件的样式中,属性的绑定一般都是用TemplateBinding来完成,如下一个基本的 ...

  7. sql单列合并

    有一组这样的数据 1  a  10 2  b  2 4  c  5 1  a  5 在应用中,我们可能需要把出现a的数据合并显示:  1   a   10,5 sqlite上实现:  SELECT   ...

  8. hibernate课程 初探单表映射1-2 ORM定义

    1 什么是ORM? ORM(Object / RelationShip Mapping) 对象/关系映射 面向对象编程(OOP)最终要把对象信息保存在关系性数据库中,要写好多sql语句.这与面向对象编 ...

  9. agc007B - Construct Sequences(构造)

    题意 题目链接 给出一个$1-N$的排列$P$,构造两个数组$a, b$满足 Sol 发现我的水平也就是能做一做0-699的题.... 直接构造两个等差数列$a, b$,公差为$20000$ 然后从小 ...

  10. Centos install ICU, INTL for php

    1. Install ICU from source wget http://download.icu-project.org/files/icu4c/56.1/icu4c-56_1-src.tgz ...