`
小嘴冰凉
  • 浏览: 461128 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

用javascript拖动DIV层

    博客分类：
  • js
JavaScript 
阅读更多 
<html>
<head>
<title>用javascript拖动DIV层</title>
<style>
body{font-family:Verdana;font-size:11px;color:#333;}
#win1{[position:absolute;left:100;top:100;width:200px;height:150px;border:1px solid #000;}
.title{width:100%;background:#000;height:18px;color:#fff;cursor: move;} 
 </style>
 </head>
<body> 
<script>
var move=false; 
function StartDrag(obj)                       
{
 if(event.button==1&&event.srcElement.tagName.toUpperCase()=="DIV")
 {
  obj.setCapture();
  obj.style.background="#999";
  move=true;
 } 
}function Drag(obj)                   
{
 if(move)
 {
  var oldwin=obj.parentNode;
  oldwin.style.left=event.clientX-100;
  oldwin.style.top=event.clientY-10;
 }
}function StopDrag(obj)
{
  obj.style.background="#000";
  obj.releaseCapture();
  move=false;
} 
</script> 
<div id="win1">
<div class="title" onMousedown="StartDrag(this)" onMouseup="StopDrag(this)" onMousemove="Drag(this)" >窗口1</div>
This is a moveable window.<br>
Moreinfo in 
</div>
</body> 
</html>
分享到：
| 关于DOM事件模型的两件事
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascript浮动div，可拖拽div,遮罩层(div和iframe实现)

    可拖拽 Div 指的是用户可以手动拖动 Div 在页面中的位置。这一功能通常采用原生 JavaScript 实现。 #### 实现步骤 1. **绑定事件监听器**：为 Div 绑定 `mousedown` 事件，当用户按下鼠标左键时触发。 2. **获取...

    javascript拖拽DIV技巧

    通过本篇文章的学习，您将了解如何使用 JavaScript 实现 DIV 元素的拖拽功能。 #### 二、JavaScript 拖拽 DIV 的基本原理 要实现 DIV 元素的拖拽功能，我们需要掌握以下几个关键步骤： 1. **获取鼠标位置**：在...

    javascript div拖动层

    javascript div拖动层 ,代码简单。

    JavaScript实现DIV层拖动

    "JavaScript实现DIV层拖动"这一主题涉及到的知识点主要包括以下几个方面： 1. **DOM操作**：在JavaScript中，Document Object Model（DOM）是HTML或XML文档的结构化表示。我们首先需要获取到要拖动的div元素，这...

    javascript 拖拽div

    javascript 拖拽 div 源代码,超简单

    Js无刷新添加新层，拖动DIV层可互换位置的JavaScript实现

    Js无刷新添加新层，拖动DIV层可互换位置的JavaScript实现 Js无刷新添加新层，拖动DIV层可互换位置的JavaScript实现

    javascript div层拖动示例

    这个"javascript div层拖动示例"就是展示了如何利用 JavaScript 让 `div` 元素可以被用户在网页上自由拖动。 拖动功能的核心在于监听鼠标事件，并计算鼠标的移动距离来更新 `div` 的位置。以下是一个基本的实现步骤...

    DIV层拖动的实现，可改变大小.

    要实现DIV层拖动，需要使用JavaScript来捕捉鼠标事件，并计算DIV层的大小和位置。 在JavaScript中，可以使用onmousedown、onmousemove和onmouseup事件来捕捉鼠标事件。在onmousedown事件中，需要记录当前鼠标的位置...

    可拖动div层，兼容IE火狐等浏览器

    总的来说，实现"可拖动div层，兼容IE火狐等浏览器"涉及到HTML、CSS和JavaScript的综合应用，尤其是jQuery的使用，可以高效地创建出用户友好的交互体验。通过学习和理解这些文件，你可以掌握如何在自己的项目中创建...

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

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

    JavaScript实现DIV层拖动及动态增加新层的方法

    JavaScript实现DIV层拖动及动态增加新层的方法主要涉及两个方面的内容：一是实现DIV层的拖动功能；二是实现动态增加新层的功能。下面详细解释这两个知识点： 首先，DIV层的拖动功能涉及到鼠标事件的监听和处理。在...

    js实现拖拽div层

    在JavaScript中实现拖拽div层是一项常见的交互设计技术，它能增强用户对网页元素的操纵感，提升用户体验。本文将详细讲解如何利用JavaScript实现div层的拖拽功能，并结合相关标签"js"、"拖拽"和"div层"进行深入讨论...

    javascript拖动div或table等网页元素

    JavaScript 提供了实现这一功能的强大支持，特别是对于div、table等网页元素的拖动操作。在这个主题中，我们将深入探讨如何使用JavaScript来实现这些元素的拖放功能，并兼容不同的浏览器，包括IE、Firefox、Opera和...

    javaScript实现DIV简单拖拽

    javaScript实现DIV简单拖拽

    Asp.net+JavaScript 实现的可拖动、可调节大小的 div层，div层中添加 sql2000 数据

    Asp.net+JavaScript 实现的可拖动、可调节大小的 div层，div层中添加 sql2000 数据 开发工具：Visual2005，兼容Visual2008 数据库名：2010Expo 数据库附加失败可以直接建表manage 表属性manageid,managename,phone,...

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

    本篇文章将详细探讨如何利用Div+CSS技术实现完美的层拖拽特效，这种特效常用于创建弹出层或可拖动的对话框，提升用户体验。 首先，要实现Div的拖拽功能，我们需要创建一个可拖动的Div元素，并为其添加CSS样式，使其...

    Javascript实现DIV拖拽和添加

    在JavaScript编程中，实现DOM元素（如DIV）的拖拽和动态添加是常见的交互功能，这对于构建具有用户友好界面的Web应用至关重要。本教程将详细讲解如何使用纯JavaScript实现这一功能，无需依赖任何外部库，如jQuery或...

    div 拖动 拖动层

    #### 2.1 使用JavaScript实现拖动 要使一个`div`元素具有拖动的功能，通常需要结合JavaScript来完成。具体步骤如下： - **监听mousedown事件**：当用户按下鼠标左键时触发。 - **计算偏移量**：记录鼠标按下时的...

    JavaScript可拖动DIV

    JavaScript可拖动DIV是一种常见的网页交互功能，它允许用户通过鼠标拖动来改变网页上某个元素（通常是div）的位置。这种技术在构建交互式界面、拖放式操作、地图应用等场景中非常常见。在本篇文章中，我们将深入探讨...

    在HTML页面中实现拖动Div层

    &lt;div id="draggable" draggable="true"&gt;可拖动的Div层&lt;/div&gt; ``` 这里的`#draggable`是一个CSS选择器，用于选中id为"draggable"的Div元素，并设置样式，如宽度、高度、背景色和边框。`cursor: move;`设置鼠标悬停...

Magicbox
Global site tag (gtag.js) - Google Analytics