`
fastwind
  • 浏览: 323841 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

一个可以拖拽的DIV

阅读更多

 

<!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>
<title></title>
</head>
<body>
<div style="background: #99CCFF; height: 140px; width: 180px; border: 1px solid #206100"
        class="dragdiv">
</div>
<div style="background: #99CCFF; height: 140px; width: 180px; border: 1px solid #206100"
        class="dragdiv">
</div>
</body>
</html>
<script type="text/javascript">
var Drag={

    dragged:false,
	ao:null,
	
    dragStart:function()
    {
        Drag.ao=event.srcElement;
        Drag.dragged=true;
        Drag.ao.style.position="absolute";
        Drag.ao.style.filter="alpha(opacity=70)";
        Drag.ao.style.cursor="move";
        Drag.ao.style.border="1px dashed red";
		Drag.lastX=event.clientX;               //自定义属性
		Drag.lastY=event.clientY;
		Drag.lastLeft=Drag.ao.offsetLeft;
		Drag.lastTop=Drag.ao.offsetTop;
    },
    draging:function(){//判断MOUSE的位置
		if(!Drag.dragged||Drag.ao==null)return;
		var tX=event.clientX;
		var tY=event.clientY;
		Drag.ao.style.left=parseInt(Drag.lastLeft)+tX-Drag.lastX;
		Drag.ao.style.top=parseInt(Drag.lastTop)+tY-Drag.lastY;
		},
    dragEnd:function(){
		if(!Drag.dragged)
			return;
		Drag.dragged=false;
		Drag.ao.style.border="1px solid #206100";
		Drag.ao.style.filter="";
	},
    
    init:function()
    {
        var dragdiv=document.getElementsByTagName('div');
        for(var i=0;i<dragdiv.length;i++)
        {
            if(dragdiv[i].className=="dragdiv")
            {
                dragdiv[i].attachEvent("onmousedown",Drag.dragStart);
            }
        }
        document.onmousemove=Drag.draging;
		document.onmouseup=Drag.dragEnd;
    }
};

Drag.init();
</script>

 

 拖拽其实并不是很难的东西,可是这个我也是弄了半天才弄出来的,其中的主要原因就是坐标的问题,关于offsetTop clientX ,都是比较棘手的

 

 

Drag.ao.style.left=parseInt(Drag.lastLeft)+tX-Drag.lastX;
Drag.ao.style.top=parseInt(Drag.lastTop)+tY-Drag.lastY;

这里我理解了好长的时间,如果没有加上parseInt(Drag.lastLeft),则当移动的时候div初始是定位在document.body的坐上角的,然后进行拖拽,div才能按正常的轨道滑行,而加上parseInt(Drag.lastLeft)了,在div移动初始的时候会把相对于document.body的坐标也加上去了, 这样就感觉到是当前位置的移动。

 

 

 

 

 

 

 

 

分享到:
评论
2 楼 fastwind 2008-07-24  
恩  对   当时忘了FF了。。。 等我改一下吧
1 楼 hejin1026 2008-07-24  
经检测,在FF中N多的问题,改进了在帖出来吧

相关推荐

    拖动多个div

    在标题“拖动多个div”中,我们关注的是如何使一个或多个 `div` 元素变得可拖动,即用户可以通过鼠标进行交互,自由地在页面上移动这些元素。这种功能在构建各种交互式界面时非常有用,例如,可以用于创建可自定义...

    拖动div到另一个div中

    标题“拖动div到另一个div中”描述的就是这样一个功能,即实现一个div元素能够被拖动并放置到另一个div内,同时显示被拖动div的ID。这个功能在各种应用场景中都很有用,如文件管理器、布局构建器或富文本编辑器等。 ...

    拖动div的四个拐角改变其大小

    标题“拖动div的四个拐角改变其大小”所描述的就是这样一个功能,允许用户通过拖动div的四个角来动态调整div的宽度和高度。 实现这个功能通常会涉及到JavaScript库,例如jQuery。jQuery是一个广泛使用的JavaScript...

    可拖动div边框改变大小的方法

    可拖动div边框改变大小的方法,jquery拖拽改变div大小效果,。。。。。。。。。。。。。。。。。。。。。。。。。

    拖拽+拖拽改变div大小

    以下是一个简单的实现示例: ```javascript let resizableDiv = document.getElementById('resizableDiv'); let startX, startY, initialWidth, initialHeight; resizableDiv.addEventListener('mousedown', ...

    js控制多个div拖拽和拖动、且能保存数据至cookie、数据库、xml

    这样,用户就能通过鼠标拖动div元素在页面上自由移动。 接下来,为了实现多个div的拖拽功能,我们需要为每个可拖动的div添加单独的事件监听器,并维护一个状态对象,用于存储每个div的当前位置。这样,每次鼠标移动...

    拖拽 拖动div 可拖拽div框 div+css html静态资源

    拖拽 拖动div 可拖拽div框 div+css html静态资源

    拖拽一个iframe中的div 在另一个iframe页面中显示

    标题 "拖拽一个iframe中的div 在另一个iframe页面中显示" 描述了在Web开发中一个交互性的技术,涉及跨框架(iframe)通信和DOM操作。这个技术主要应用于创建富交互的用户界面,允许用户在不同的iframe之间传递和操作...

    弹出一个可拖拽的div

    在网页开发中,创建一个可拖拽的div层是一项实用的技术,它允许用户通过鼠标操作移动界面元素,提升用户体验。这个技术主要涉及到HTML、CSS和JavaScript的交互运用,特别是JavaScript中的事件监听和DOM操作。接下来...

    Div+CSS层完美实现拖拽特效

    首先,要实现Div的拖拽功能,我们需要创建一个可拖动的Div元素,并为其添加CSS样式,使其看起来像一个独立的层。这通常包括设置边框、背景色、透明度等属性,以及通过`position: absolute`或`position: fixed`来让该...

    html 拖动div进行相应顺序的排序,亲测可用,简单方便

    通过这样的实现,用户可以通过直接拖动div来改变它们的顺序,而页面会实时反映出这种变化。这种方式在各种场景下都很有用,比如任务列表、菜单栏等需要用户自定义顺序的地方。 在提供的压缩包文件“拖动进行排序....

    js拖拽div随意摆放

    首先,我们需要创建一个可拖动的div元素。在HTML中,我们可以这样定义: ```html &lt;div id="draggable" style="width: 100px; height: 100px; background-color: blue; position: absolute;"&gt;&lt;/div&gt; ``` 这里我们...

    jQuery鼠标上下拖动div排序代码

    本文将深入探讨如何利用jQuery库实现鼠标上下拖动div进行排序的功能,同时结合描述中的内容,我们会看到一个实例,该实例不仅支持div的拖动排序,还包含了一个左上角的按钮,用于触发其他操作。 首先,jQuery是...

    jQueryUI拖拽效果_拖拽div的值到table表格里面

    div可以是任意包含待拖动数据的元素,而表格则需有一个tbody元素作为放置目标。 ```html &lt;div class="draggable-div"&gt;待拖动的值&lt;/div&gt; &lt;tr&gt;&lt;th&gt;列标题&lt;/th&gt;&lt;/tr&gt; ``` 4. **CSS样式**: 为了提高...

    DIV可移动 可实现任意拖动放大缩小

    标题中的“DIV可移动 可实现任意拖动放大缩小”是指一种使用JavaScript技术来实现的交互功能,允许用户在网页上自由地拖动、缩放HTML中的div元素。这一功能通常用于创建用户界面元素,如窗口、面板或者任何需要动态...

    js拖动div并拖动DIV的大小

    以上就是实现“js拖动div并拖动DIV的大小”的主要步骤和涉及的技术。实际开发中,你可以选择使用库或框架,如jQuery UI的Resizable组件,来简化这一过程。然而,理解这些基础知识将帮助你更好地理解和定制功能,特别...

    js拖动、拖拽div大小,完美实现版

    js拖动 拖拽div大小,内部随意文件操作。完美实现版

    JQ JS javascript layui UI组件 元素 div 拖动插件

    本资源涉及的是一个基于jQuery(JQ)、JavaScript(JS)和layui框架的UI组件,特别关注的是元素(尤其是div)的拖动功能。拖动插件是一种常见且实用的增强交互性的工具,它允许用户通过鼠标操作移动页面上的元素,...

    纯Javascript编写的div拖拽以及用鼠标绘制div之间连接线(包含箭头)

    纯Javascript编写的div拖拽以及用鼠标绘制div之间连接线,外部资源仅需要jquery。有以下功能: 1、创建节点 2、节点随鼠标任意拖动 3、切换拖动和画线模式 4、用鼠标绘制两个节点之间带有箭头的连线 5、连接线随节点...

    asp.net中实现可拖动div

    在ASP.NET中实现一个可拖动的div是提高用户界面交互性和用户体验的有效方式,尤其当需要替代传统的alert对话框时,可拖动div能提供更加灵活和友好的用户体验。 首先,要实现可拖动的div,我们需要理解HTML和CSS的...

Global site tag (gtag.js) - Google Analytics