在开发的时候需要一个可拖拽的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. P2375 [NOI2014]动物园 KMP

    好,暴力能拿$50pts\space qwq$ 暴力的思路就是一直跳$nxt[j]$,直到它的长度小于串的一半,然后开始计数,当然要接着跳$nxt[j]$ 正解:考虑没有长度要求的(不要求不重合)公共 ...

  2. 匿名内部类（new类时覆盖类中方法）

    public class Person { private String name ; protected String getName() { return name; } public void ...

  3. ffmpeg文件生成m3u8文件及ts切片程序(一)

    ffmpeg文件生成m3u8文件及ts切片程序(一) 实现目标:输入本地文件,实现m3u8切片,功能点请看注释,注意:注释很重要. 参考: http://www.cnblogs.com/mystory ...

  4. 030 Substring with Concatenation of All Words 与所有单词相关联的字串

    给定一个字符串 s 和一些长度相同的单词 words,找出 s 与 words 中所有单词(words 每个单词只出现一次)串联一起(words中组成串联串的单词的顺序随意)的字符串匹配的所有起始索引 ...

  5. Elasticsearch在后台启动

    Elasticsearch在linux下使用命令sh elasticsearch start,按键ctrl+c的时候程序就会stop掉,如何将程序在后台启动呢? 需要使用:./elasticsearc ...

  6. C#简单代码转移数据库数据

    using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Data;u ...

  7. iOS开发之数据存取

    http://www.cocoachina.com/ios/20141111/10190.html

  8. flask--数据库连接--URL

    使用URL制定数据库 数据库引擎 URL MySQL mysql://username:password@hostname/database Postgres postgresql://usernam ...

  9. C 碎片三 运算符与表达式

    一.算术运算符 算术运算符:+. -. *. /. %等 加:+ 减: - 乘: * 除: /     除数不能为0 模:%    参与模运算的数据不能为小数 二.赋值运算符 赋值运算符:= 作用: ...

  10. hibernate课程 初探单表映射1-10 JUnit测试

    三大注解: 1 @Test 2 @Before 3 @After 执行顺序213 demo.java package hibernate_001; import org.junit.After; im ...