方案一:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">  

<head runat="server">  

    <title></title>  

    <script type="text/javascript">  

        var mouseX, mouseY;  

        var objX, objY;  

        var isDowm = false;  //是否按下鼠标  

        function mouseDown(obj, e) {  

            obj.style.cursor = "move";  

            objX = div1.style.left;  

            objY = div1.style.top;  

            mouseX = e.clientX;  

            mouseY = e.clientY;  

            isDowm = true;  

        }  

        function mouseMove(e) {  

            var div = document.getElementById("div1");  

            var x = e.clientX;  

            var y = e.clientY;  

            if (isDowm) {  

                div.style.left = parseInt(objX) + parseInt(x) - parseInt(mouseX) + "px";  

                div.style.top = parseInt(objY) + parseInt(y) - parseInt(mouseY) + "px";  

                document.getElementById("span1").innerHTML = "x:" + div.style.top + "  " + "y:" + div.style.left;  

            }  

        }  

        function mouseUp(e) {  

            if (isDowm) {  

                var x = e.clientX;  

                var y = e.clientY;  

                var div = document.getElementById("div1");  

                div.style.left = (parseInt(x) - parseInt(mouseX) + parseInt(objX)) + "px";  

                div.style.top = (parseInt(y) - parseInt(mouseY) + parseInt(objY)) + "px";  

                document.getElementById("span2").innerHTML = "x:" + div.style.top + "  " + "y:" + div.style.left;  

                mouseX = x;  

                rewmouseY = y;  

                div1.style.cursor = "default";  

                isDowm = false;  

            }  

        }  

    </script>  

</head>  

<body>  

    <span id="span1"></span></br><span id="span2"></span></br>  

    <div id="div1" style="background-color: Green; border: 1px solid red; height: 300px;  

        top: 100px; left: 100px; width: 300px; position: absolute;" onmousedown="mouseDown(this,event)"  

        onmousemove="mouseMove(event)" onmouseup="mouseUp(event)">  

    </div>  

</body>

</html>

方案二:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>拖拽库</title>

<style type="text/css">

div,h2,p{margin:0;padding:0;}

body{font:14px/1.5 arial;}

#box{width:100px;height:100px;background:#fef4eb;padding:5px;margin:50px;border:1px solid #f60;}

#box .title{height:25px;background:#f60;}

#tool{margin-bottom:10px;}

</style>

<script type="text/javascript">

function Drag()

{

 //初始化

 this.initialize.apply(this, arguments)

}

Drag.prototype = {

 //初始化

 initialize : function (drag, options)

 {

  this.drag = this.$(drag);

  this._x = this._y = 0;

  this._moveDrag = this.bind(this, this.moveDrag);

  this._stopDrag = this.bind(this, this.stopDrag);



  this.setOptions(options);



  this.handle = this.$(this.options.handle);

  this.maxContainer = this.$(this.options.maxContainer);



  this.maxTop = Math.max(this.maxContainer.clientHeight, this.maxContainer.scrollHeight) - this.drag.offsetHeight;

  this.maxLeft = Math.max(this.maxContainer.clientWidth, this.maxContainer.scrollWidth) - this.drag.offsetWidth;



  this.limit = this.options.limit;

  this.lockX = this.options.lockX;

  this.lockY = this.options.lockY;

  this.lock = this.options.lock;



  this.onStart = this.options.onStart;

  this.onMove = this.options.onMove;

  this.onStop = this.options.onStop;



  this.handle.style.cursor = "move";



  this.changeLayout();



  this.addHandler(this.handle, "mousedown", this.bind(this, this.startDrag))

 },

 changeLayout : function ()

 {

  this.drag.style.top = this.drag.offsetTop + "px";

  this.drag.style.left = this.drag.offsetLeft + "px";

  this.drag.style.position = "absolute";

  this.drag.style.margin = "0"

 },

 startDrag : function (event)

 {  

  var event = event || window.event;



  this._x = event.clientX - this.drag.offsetLeft;

  this._y = event.clientY - this.drag.offsetTop;



  this.addHandler(document, "mousemove", this._moveDrag);

  this.addHandler(document, "mouseup", this._stopDrag);



  event.preventDefault && event.preventDefault();

  this.handle.setCapture && this.handle.setCapture();



  this.onStart()

 },

 moveDrag : function (event)

 {

  var event = event || window.event;



  var iTop = event.clientY - this._y;

  var iLeft = event.clientX - this._x;



  if (this.lock) return;



  this.limit && (iTop < 0 && (iTop = 0), iLeft < 0 && (iLeft = 0), iTop > this.maxTop && (iTop = this.maxTop), iLeft > this.maxLeft && (iLeft = this.maxLeft));



  this.lockY || (this.drag.style.top = iTop + "px");

  this.lockX || (this.drag.style.left = iLeft + "px");



  event.preventDefault && event.preventDefault();



  this.onMove()

 },

 stopDrag : function ()

 {

  this.removeHandler(document, "mousemove", this._moveDrag);

  this.removeHandler(document, "mouseup", this._stopDrag);



  this.handle.releaseCapture && this.handle.releaseCapture();



  this.onStop()

 },

 //參数设置

 setOptions : function (options)

 {

  this.options =

  {

   handle:   this.drag, //事件对象

   limit:   true, //锁定范围

   lock:   false, //锁定位置

   lockX:   false, //锁定水平位置

   lockY:   false, //锁定垂直位置

   maxContainer: document.documentElement || document.body, //指定限制容器

   onStart:  function () {}, //開始时回调函数

   onMove:   function () {}, //拖拽时回调函数

   onStop:   function () {}  //停止时回调函数

  };

  for (var p in options) this.options[p] = options[p]

 },

 //获取id

 $ : function (id)

 {

  return typeof id === "string" ? document.getElementById(id) : id

 },

 //加入绑定事件

 addHandler : function (oElement, sEventType, fnHandler)

 {

  return oElement.addEventListener ? oElement.addEventListener(sEventType, fnHandler, false) : oElement.attachEvent("on" + sEventType, fnHandler)

 },

 //删除绑定事件

 removeHandler : function (oElement, sEventType, fnHandler)

 {

  return oElement.removeEventListener ?

oElement.removeEventListener(sEventType, fnHandler, false) : oElement.detachEvent("on" + sEventType, fnHandler)

 },

 //绑定事件到对象

 bind : function (object, fnHandler)

 {

  return function ()

  {

   return fnHandler.apply(object, arguments) 

  }

 }

};

//应用

window.onload = function ()

{

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

 var oTitle = oBox.getElementsByTagName("h2")[0];

 var oSpan = document.getElementsByTagName("span")[0];

 var oDrag = new Drag(oBox, {handle:oTitle, limit:false});



 var aInput = document.getElementsByTagName("input");



 //锁定范围接口

 aInput[0].onclick = function ()

 {

  oDrag.limit = !oDrag.limit;

  this.value = oDrag.limit ? "取消锁定范围" : "锁定范围"

 };



 //水平锁定接口

 aInput[1].onclick = function ()

 {

  oDrag.lockX = !oDrag.lockX;

  this.value = oDrag.lockX ? "取消水平锁定" : "水平锁定"

 };



 //垂直锁定接口

 aInput[2].onclick = function ()

 {

  oDrag.lockY = !oDrag.lockY;

  this.value = oDrag.lockY ? "取消垂直锁定" : "垂直锁定"

 };



 //锁定位置接口

 aInput[3].onclick = function ()

 {

  oDrag.lock = !oDrag.lock;

  this.value = oDrag.lock ? "取消锁定位置" : "锁定位置"

 };



 //開始拖拽时方法

 oDrag.onStart = function ()

 {

  oSpan.innerHTML = "開始拖拽" 

 };



 //開始拖拽时方法

 oDrag.onMove = function ()

 {

  oSpan.innerHTML = "left:" + this.drag.offsetLeft + ", top:" + this.drag.offsetTop 

 };



 //開始拖拽时方法

 oDrag.onStop = function ()

 {

  oSpan.innerHTML = "结束拖拽" 

 };

};

</script>

</head>

<body>

<div id="tool">

 <input type="button" value="锁定范围" />

    <input type="button" value="水平锁定" />

    <input type="button" value="垂直锁定" />

    <input type="button" value="锁定位置" />

</div>

<p>拖放状态:<span>未開始</span></p>

<div id="box">

 <h2 class="title"></h2>

</div>

</body>

</html>

</td>

   </tr>

 </table>

js完美的div拖拽实例代码的更多相关文章

  1. 纯js实现DIV拖拽

    写代码的时候遇到需要对绝对布局的div进行拖拽的功能,起初为了省事直接在网上扒拉了一番,看到大神张鑫旭的一篇文章<JavaScript实现最简单的拖拽效果>,便直接拿来使用(膜拜大神).但 ...

  2. js div浮动层拖拽效果代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. html js点击按钮滚动跳转定位到页面指定位置(DIV)的方法代码

    一:通过html锚点实现滚动定位到页面指定位置(DIV):    如果我们要点击实现跳转的地方是一个html锚点,也就是点击一个A标签超链接实现跳转,可以把A标签的href属性直接指向跳转指定位置的d ...

  4. js/jquery/html前端开发常用到代码片段

    1.IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条件注释只能用于IE5以上,IE ...

  5. 通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽

    前言 关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球.本文的重点是讲解如何在某些特定的元素上禁止拖拽.这是我在编写插件时遇到的问题,其实很多插件的拖拽功能 ...

  6. div+css通用兼容性代码整理

    一.Div+css通用兼容性代码 你可以在css开头加入 *html{padding:0px} <style> *html{padding:0px} /* Clear Fix */ .cl ...

  7. 运用DIV拖拽实现resize和碰撞检测

    运用DIV拖拽实现resize和碰撞检测 Div由拖拽改变大小 演示demo 当我们运用html元素"textarea"写一个文本输入框时,浏览器会自动生成以下样式 用鼠标拖动右下 ...

  8. ECharts组件应用样例代码

    一.从Echarts官网上下载最新版本组件 Echarts是百度开发的开源Web图表组件,界面美观,使用简单.组件下载地址:http://echarts.baidu.com/echarts2/doc/ ...

  9. js实现拉伸拖动iframe的具体代码

    这篇文章介绍了js实现拉伸拖动iframe的具体代码,有需要的朋友可以参考一下左边iframe放树目录,右边的iframe放index页.拖鼠标同时控制2个iframe的宽高.期待有人能改进.操作方法 ...

随机推荐

  1. JS 和 HTML 中的单引号与双引号

    JS中的单引号与双引号 HTML中的单引号与双引号很简单,就是两个字符实体: 显示 描述 实体名称 实体编号 " 双引号.引号 " " ' 单引号.撇号 &apo ...

  2. 谈谈javascript的函数作用域

    在一些类似c语言的编程语言中,花括号内的每一段代码都具有各自的作用域,而且变量在声明他们的代码段之外是不可见的,我们称为块级作用域(block scope),而javascript中没有块级作用域.取 ...

  3. SQL基础(二):SQL命令

    1.SQL SELECT TOP 子句 SELECT TOP 子句用于规定要返回的记录的数目.SELECT TOP 子句对于拥有数千条记录的大型表来说,是非常有用的(或者比如选取某个最新的数据:我们可 ...

  4. Android实现图片轮显效果——自定义ViewPager控件

    一.问题概述 使用ViewPager控件实现可横向翻页.水平切换图片等效果,但ViewPager需要手动滑动才能切换页面,图片轮显效果的效果本质上就是在ViewPager控件的基础上让它能自动的进行切 ...

  5. linux CentOS7 安装spark

    上次安装了scala-2.11.8,这次安装spark-2.1.0版本 1.下载spark-2.1.0 打开terminal 进入当前用户目录 /home/sks wget http://d3kbcq ...

  6. (转)在ios android设备上使用 Protobuf (使用dll方式)

    自:http://game.ceeger.com/forum/read.php?tid=13479 如果你的工程可以以.Net 2.0 subset模式运行,请看这个帖子中的方法. 地址:http:/ ...

  7. 查看sedna创建的数据库和集合,文档之类

    在sedna的安装文件夹下.看一下cfg文件夹: <pre name="code" class="plain">[xuzhina@localhost ...

  8. Convert CString to ANSI string in UNICODE projects

    Convert CString to ANSI string in UNICODE projects Quick Answer: use an intermediate CStringA. Norma ...

  9. 下载RAD

    1.登录https://w3-103.ibm.com/software/xl/download/ticket.do 2.输入Intranet ID和pswd,然后选I Agree. 3.然后点Sear ...

  10. Vector 多字段排序的Java实现

    要求实现: Vector 多字段排序,其中首元素不参与排序,第一二三字段升序,空排到前面. //这里是Vector的元素定义 public class AVectorElement { private ...