javascript 可以拖动的DIV（二）

function beginDrag(elementToDrag,event)
{
var =event.clientX-parseInt(elementToDrag.style.left);
var deltaY=event.clientY-parseInt(elementToDrag.style.top);
//这儿的deltaX/Y实际上就是得出鼠标和div的坐标差。
if(document.addEventListener)
//之所以在这儿加这样一个判断，是因为IE6和firefox对于javascript的事件处理有不同的方法（IE7之后的版本开始符合W3C的标准）。
//document.addEventlistener如果是true的话，那就是firefox等支持W3C DOM标准的浏览器，IE6中注册事件用attachEvent，而firefox等浏览器则是用addEventListener，语法如下所示。addEventListener函数的true参数表示可以捕捉事件。
{
document.addEventListener("mousemove",moveHandler,true);
document.addEventListener("mouseup",upHandler,true);
//document.addEventListener("mouseout",upHandler,true);
}
else if(document.attachEvent)
{
document.attachEvent("onmousemove",moveHandler);
document.attachEvent("onmouseup",upHandler);
//document.attachEvent("onmouseout",upHandler);
}
if(event.stopPropagation) event.stopPropagation();
else event.cancelBubble=true;
//这儿的判断依然是考虑了不同的浏览器，stopPropagation是W3C DOM标准中使用的一个方法，用来取消事件的传播。我们使用了document.addEventListener这个方法，浏览器会从document对象沿着DOM节点向下传播到目标节点，注册的事件处理程序就会运行，然后事件会回传到父节点，如果父节点也有相应的事件处理程序，那么事件也会处理，为了避免这种情况，我们可以用stopPropagation来阻止事件的传播，这个方法的作用就是让其他元素对这个事件不可见。在IE6下，并没有元素捕捉事件的过程，不过有这个术语叫做起泡的过程，IE6中所用的方法就是cancelBubble，用来取消起泡，表示这个事件已被处理，其他元素不用再看见了。
if(event.preventDefault) event.preventDefault();
else event.returnValue=false;
//这儿的preventDefault用来通知浏览器不要执行与事件关联的默认动作，returnValue用来取消发生事件的源元素的默认动作，大家应该能看出这是在不同浏览器下发挥相同的作用。
//以下就是拖动div中所用的关键函数了。
function moveHandler(e)
{
　　 if (!e) e=window.event; //如果是IE的事件对象，那么就用window.event
　　 //全局属性，否则就用DOM二级标准的Event对象。
//在IE中，event是window的一个属性，也就是一个全局变量，但是在W3C DOM中，event是发生事件的文档对象的属性。在这个程序中，event是什么并不重要，关键是我们要取得鼠标的坐标值，在IE中，e这个参数传进来的时候，IE认不出来，所以我们就给e赋值为window.event。
elementToDrag.style.left=(e.clientX-deltaX)+"px";
elementToDrag.style.top=(e.clientY-deltaY)+"px";
//这儿就是改变现在正在作用的div的left和top属性。
if(e.stopPropagation) e.stopPropagation();
else e.cancelBubble=true;
}
function upHandler(e)
{
if(document.removeEventListener)
{
document.removeEventListener("mouseup",upHandler,true);
document.removeEventListener("mousemove",moveHandler,true);
}
else
{
document.detachEvent("onmouseup",upHandler);
document.detachEvent("onmousemove",moveHandler);
}
//这个函数是用来移除侦听器，比较简单，就不详细说了。
if (!e) e=window.event;
if(e.stopPropagation) e.stopPropagation();
else e.cancelBubble=true;
}
}
我们 编辑注：如果不能正常运行 注意字符的替换，因为好多网站为了安装都将字符转换成了中文下的标点符号。本站也尽量的替换。

赞 (0)

相关推荐

  • js实现图片拖动改变顺序附图

    js实现图片拖动改变顺序附图

    在web页面中,需要改变多个元素的位置,可以通过元素拖动来实现.HTML5中加入了一个全局属性draggable,通过设置true/false来控制元素是否可拖动. 下面以图片拖动为例,用jQuery来实现:页面上有多个图片,把一个图片拖动到其他两个图片中间,就可以将这个图片的位置插入到两图之间. 复制代码 代码如下: <!DOCTYPE html> <html> <head> <style> .img-div img { width:200px; heig

  • js之完全兼容ie与firefox的拖动层代码[测试好用]

    zhou's html 一共三个层,下面还有一个,把他拖上来 Magnolia Mag.nolia Mozilla Red 小 纸 条 一共三个层,下面还有一个,把他拖上来 有了拖动层,做局部拖动很简单 小 纸 条 一共三个层,下面还有一个,把他拖上来 顺便练习下颜色搭配 Shiny silver var $=function(id){return document.getElementById(id)}; Array.prototype.extend=function(C){for(var B

  • javascript div 弹出可拖动窗口

    /* * 创建弹出div窗口. 1.接口说明:DivWindow(id,title,width,height,content) 构造函数,创建一个弹出窗口对象 参数:id 弹出窗口id: title:弹出窗口标题名称: width:弹出窗口宽度 height:弹出窗口高度 content: 弹出窗口显示内容 2.接口说明: closeDivWindow(id) 关闭窗口 参数: id 弹出窗口id 3.接口说明:setPopupTopTitleFontColor(PopupTopTitleFon

  • 比较精简的Javascript拖动效果函数代码

    拖动效果函数演示 by Longbill.cn body { font-size:12px; color:#333333; border : 0px solid blue; } div { position : absolute; background-color : #c3d9ff; margin : 0px; padding : 5px; border : 0px; width : 100px; height:100px; } function drag(o,s) { if (typeof

  • js 鼠标拖动对象 可让任何div实现拖动效果

    js鼠标拖动对象: 复制代码 代码如下: //定义鼠标拖动对象 drag=function (a,o){      var d=document;if(!a)a=window.event;         if(!a.pageX)a.pageX=a.clientX;         if(!a.pageY)a.pageY=a.clientY;      var x=a.pageX,y=a.pageY;      if(o.setCapture)          o.setCapture();

  • js实现可拖动DIV的方法

    随着时代的变化,越来越感觉到js的重要性,js不仅可以做web页面(如Ext框架),还可以做一些web的特效,这些特效不仅兼容PC,而且兼容手机端,毕竟是基于浏览器的,和平台没关系.现在微软的windows8 系统的App都可以用js开发了,大家有时间可以去尝试一下. 现在切入正题,说一下js 实现可拖动Div.实现这个功能我们先说一下思路: 1.捕捉鼠标div的mousedown事件 2.捕捉 document的   mousemove事件 3.取消事件 然后我们看一下代码: 复制代码 代码如

  • 一起来写段JS drag拖动代码

    1.为要被拖移三个事件,onmousedown,onmousemove,onmouseup 2.在onmousemove事件中来处理被拖移元素的位置的变化,其实说白了元素要移动的距离就是鼠标两次移动之间的距离. 3.其中还包括setCapture,releaseCapture,目的就是为了被搬移的元素始终能拥有焦点. 以前大致就是以前的认识,可以参见 JS拖动技术--- 关于setCapture 这个实现,后来随着工作要求的提高,做的工作都是要跨浏览器的,所以就重新构思并参考一些开源代码做了实现

  • 利用javascript移动div层-javascript 拖动层

    利用javascript移动div层-javascript 拖动层: 程序功能:利用javascript开发在界面上随意拖动以下html code中的div层. javascript移动div层-javascript 拖动层代码-html code: 复制代码 代码如下: <div id="div_Info" style="display: none; dz-index: 101; left: 175px; width: 650px; position: absolut

  • JS高级拖动技术 setCapture，releaseCapture

    复制代码 代码如下: <script type="text/javascript"> <!-- window.onload=function(){ objDiv = document.getElementById('drag'); drag(objDiv); }; function drag(dv){ dv.onmousedown=function(e){ var d=document; e = e || window.event; var x= e.layerX |

  • 鼠标拖动动态改变表格的宽度的js脚本 兼容ie/firefox

    table拖动(兼容Firefox 3.5/IE6),固定表格宽度 table拖动(兼容Firefox 3.5/IE6),固定表格宽度 watch_dog){ o.p_p_p_sw(o.parentNode.cellIndex+1,watch_dog-o.p_p_c_gw(0)); return; } var t=a.clientX-lastX;out.innerHTML=t; if(t>0) {//right if(parseInt(o.parentNode.parentNode.cells[

  • JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】

    本文实例讲述了JS实现兼容各种浏览器的高级拖动方法.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;

  • html+javascript实现可拖动可提交的弹出层对话框效果

    html+javascript实现可拖动可提交的弹出层对话框效果

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JAVASCRI

  • Javascript实现的类似Google的Div拖动效果代码

    复制代码 代码如下: JScript 文件: //检测浏览器 MSIE Firefox var ie=false,moz=false; (function() {//check the browser var userAgent=navigator.userAgent; if(userAgent.indexOf("MSIE")!=-1) ie=true; else if(userAgent.indexOf("Firefox")!=-1) moz=true; })()

随机推荐