`

js 脚本div拖拽效果

    博客分类:
  • js
阅读更多
1、工作中遇到需要拖拽div的功能,在网上查到脚本后直接使用
代码如下:evcen.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 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>
分享到:
评论

相关推荐

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

    本示例涉及的主题是“js控制多个div拖拽和拖动、且能保存数据至cookie、数据库、xml”,这是一项实用技术,尤其适用于创建交互性强的Web 2.0应用程序。下面将详细介绍这一主题的相关知识点。 首先,让我们了解...

    七个不错的DIV拖拽效果收集

    这个名为"七个不错的DIV拖拽效果收集"的资源包显然包含了一系列的HTML示例,展示了如何实现用户友好的拖放(Drag and Drop)功能。这种功能允许用户通过鼠标操作移动元素,增强了网页的交互性和用户体验。 拖放功能...

    DIV+JS优化案例,非常酷的拖拽翻页效果.zip

    本案例聚焦于"DIV+JS优化",特别是实现"非常酷的拖拽翻页效果",这是一种创新且吸引用户的网页浏览方式。下面我们将深入探讨这一技术实现的细节。 首先,`DIV`是HTML中的一个块级元素,常用于布局和样式控制。在...

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

    JavaScript(JS)是一种广泛用于网页和网络应用的脚本语言,尤其在实现用户交互和动态效果方面具有重要作用。在这个“js div浮动层拖拽效果代码.zip”中,包含的是一段实现HTML `&lt;div&gt;` 元素可拖动功能的JS代码。这...

    拖拽+拖拽改变div大小

    在网页开发中,"拖拽+拖拽改变div大小"是一种常见的交互设计,它允许用户通过鼠标拖动来调整div元素的尺寸。这种功能在创建可定制的布局、图形编辑工具或者任何需要用户自定义区域大小的应用中非常有用。本文将深入...

    JS拖拽DIV后保存位置示例

    在IT领域,JavaScript(简称JS)是一种广泛使用的客户端脚本语言,主要用于网页和网络应用的交互与动态效果。本示例“JS拖拽DIV后保存位置”是关于如何使用JavaScript实现用户可以拖动HTML中的&lt;div&gt;元素,并在拖动后...

    DIV移动并排序JS效果

    在网页开发中,JavaScript是一种非常重要的脚本语言,它能够为网页添加动态功能,使得用户交互体验更加...实际应用中,结合CSS样式和JavaScript脚本,可以实现各种各样的动态布局和交互功能,提升网站或应用的吸引力。

    splitter.js 分割div 自由拖动

    查看这些文件可以帮助理解如何在实际项目中集成`splitter.js`,包括HTML结构、CSS样式和JavaScript脚本的编写。 7. **拓展与定制**: 开发者可以根据项目需求扩展`splitter.js`,例如添加动画效果、键盘导航支持,...

    js拖动窗口效果_div层

    利用js脚本实现在页面拖动窗口的效果,类似于在windows平台的拖动窗口,效果可嘉,不妨一试。

    JS实现网页Div层Clone拖拽效果

    本文标题“JS实现网页Div层Clone拖拽效果”,即意味着文章要介绍如何利用JavaScript语言实现网页中某个Div元素(一个层)的拖拽,并且当用户拖拽该元素时,会生成一个副本(Clone),即拖拽的同时复制元素,使得页面...

    兼容性非常好的Js网页DIV模块拖动代码.rar

    一个兼容性非常好的Js网页DIV模块拖动代码,就JavaScript结合PHP实现的网页DIV模块拖动特效,以ajax方式拖动,先前可见于博客的管理后台,用于管理自己网站的模块排序。本拖动特效结合PHP程序,实现了拖动模块位置的...

    Ext div拖动demo

    总结来说,"Ext div拖动demo"是一个使用Ext JS库和JavaScript实现的&lt;div&gt;元素上下拖动的示例,它展示了如何利用Web技术创建动态、交互式的用户界面。通过理解并应用这些知识,开发者可以提升Web应用的用户体验,并在...

    JS可拖动窗口控件,可实现各种DIV窗口自定义及各种DIV弹出提示框 带遮罩层的DIV窗口/对话框控件 js javascript 对话框

    JS作为浏览器内置的脚本语言,可以直接操作DOM,处理事件,执行异步操作等。而jQuery则简化了DOM操作,提供了动画效果和跨浏览器兼容性,使得开发者能更高效地实现此类功能。 总的来说,这个资源为开发者提供了一个...

    完美的js div拖拽实例代码

    在讲解这段完美的JS div拖拽实例代码之前,我们需要掌握几个核心的Web开发技术点,这些技术点包括HTML、CSS和JavaScript,以及它们之间如何协同工作以实现用户界面的交云动效果。 首先,HTML(HyperText Markup ...

    js完美的div拖拽实例代码

    在这段关于“js完美的div拖拽实例代码”的内容中,涉及到的是利用JavaScript来实现一个网页元素(div)的拖拽功能。这个功能允许用户通过鼠标操作将页面上的一个div元素从一个位置移动到另一个位置。在当今的网页...

    div动态拖拽

    在IT领域,尤其是在前端开发中,"div动态拖拽"是一项常见的交互设计技术。这个功能允许用户通过鼠标操作,将HTML中的div元素在页面上自由移动,为用户提供了一种直观的交互方式。在这个案例中,开发者已经实现了一个...

    js div拖动完美版

    标题中的"js div拖动完美版"指的是一个JavaScript实现的Div元素拖动功能,它可以使得网页上的Div元素具有拖放效果。这个功能在许多交互式Web应用中非常常见,例如在构建可自定义布局的界面或者创建拖拽排序列表时。 ...

    div拖拽

    标题中的“div拖拽”指的是在网页开发中实现HTML元素(特别是`&lt;div&gt;`标签)的拖放功能。拖放功能允许用户通过...打开这个文件,可以看到具体的HTML结构、CSS样式以及JavaScript脚本,这些都是实现拖放功能的关键部分。

    DIV+CSS拖拽功能

    首先,实现`DIV+CSS拖拽功能`需要理解`JavaScript`或`jQuery`等客户端脚本语言的作用。它们可以监听用户的鼠标事件,如`mousedown`(鼠标按键按下)、`mousemove`(鼠标移动)和`mouseup`(鼠标按键释放),以此来...

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

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

Global site tag (gtag.js) - Google Analytics