原理：鼠标单击title时候给需要移动的div块添加mouseMove与mouseUp
在mouseMove中不断改变 div 坐标，使之随着运动
mouseUp的时候移除div的 mousemove 和mouseup 事件
<!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=gb2312" />
<title>drag</title>
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var drag=new dragMing("#title","#main");
function dragMing(idORclass1,idORclass2){
var obj=this;
this.idORclass1=idORclass1;
this.idORclass2=idORclass2;
this.deltaX=0;
this.deltaY=0;
function dragStart(dragEvent){
obj.deltaX=dragEvent.clientX-$(obj.idORclass2).offset().left;
obj.deltaY=dragEvent.clientY-$(obj.idORclass2).offset().top;
$(document).bind("mousemove",dragMove);
$(document).bind("mouseup",dragStop);
dragEvent.preventDefault();
}
function dragMove(dragEvent){
$(obj.idORclass2).css({
"left":(dragEvent.clientX-obj.deltaX)+"px",
"top" :(dragEvent.clientY-obj.deltaY)+"px",
})
dragEvent.preventDefault();
}
function dragStop(){
$(document).unbind("mousemove",dragMove);
$(document).unbind("mouseup",dragStop);
}
$(document).ready(function(){
$(obj.idORclass1).bind("mousedown",dragStart);
})
}
</script>
</head>
<style type="text/css">
body{
margin:0;
padding:0;
}
#main{
position:absolute;
width:100px;
height:200px;
color:red;
background-color:yellow;
}
#title{
width:100px;
height:20px;
background-color:#00FF00;
border:5px;
}
</style>
<body>
<div id="main">
<div id="title"></div>
</div>
</body>
</html>
相关推荐
本资源"jquery鼠标拖动层DIV源代码精简整理版"提供了一个轻量级的解决方案，用于实现HTML元素（特别是DIV）的拖动功能。下面我们将深入探讨这一主题。 首先，`div`是HTML中的一个块级元素，常用来组织页面布局。...
在JavaScript中，实现鼠标拖动div移动的效果是...同时，压缩包内的"JS实现鼠标拖动div移动(附效果演示)"很可能是包含了一个示例代码和运行效果的HTML文件，通过查看和运行这个文件，你可以更直观地理解和学习这个过程。
jquery图片鼠标拖动效果代码是一款jquery div页面图片浮动层鼠标拖动效果代码。
在JavaScript中实现鼠标拖动div的效果是一项常见的交互功能，它能增强用户与网页元素的互动性。这个功能主要涉及到事件监听、元素位置的计算以及页面重绘等技术。以下将详细讲解如何通过JavaScript来实现这一效果。 ...
《jQuery实现鼠标拖动div排序技术详解》 在网页开发中，用户交互体验是至关重要的。其中，元素的可拖动排序功能可以让用户更加直观地调整界面布局，提高使用便捷性。本文将深入探讨如何利用jQuery库实现鼠标上下...
在本文中，我们将深入探讨如何使用jQuery实现一个简单的鼠标拖动div层进行排序的功能。这个功能允许用户通过鼠标操作，自由地改变div容器内li元素的排列顺序，从而提供更直观和互动的用户体验。 首先，我们需要理解...
标题中的“鼠标拖动divjquery-ui-1.11.0.rar”指的是一个使用jQuery UI库实现的鼠标拖动功能的示例项目。这个压缩包包含了一个基于jQuery UI 1.11.0版本的代码资源，允许用户通过鼠标拖动HTML元素，如div，以实现...
"jquery div页面图片浮动层鼠标拖动效果代码.zip"是一个示例项目，用于展示如何利用jQuery实现一个图片浮动层，并且允许用户通过鼠标拖动来移动这个浮动层。在这个压缩包中，我们有两个文件：`使用须知.txt`和`...
本文将详细解析"jQuery鼠标上下拖动div排序代码.zip"中的技术要点，帮助开发者理解和应用这一实用功能。 首先，jQuery库是JavaScript的一个强大扩展，它简化了DOM操作、事件处理和动画效果等任务。在这个项目中，...
在Web开发中，实现鼠标拖动div主要涉及以下知识点： 1. JavaScript基础：这是实现拖放功能的核心，因为HTML和CSS本身不支持直接的拖放操作。JavaScript提供了事件监听、DOM操作等功能，使得我们可以动态响应用户的...
这个功能允许用户通过拖动div元素来改变它们在页面上的顺序，从而实现自定义排序。 首先，HTML（超文本标记语言）是网页的基础结构语言，它定义了网页的各个部分，如标题、段落、链接等。在拖放排序的场景中，HTML...
在提供的压缩包文件"move_div"中，可能包含了这个示例的完整代码，包括HTML、CSS和JavaScript文件，你可以参考这些文件来进一步学习和实现自己的可拖动div功能。通过这样的实践，你不仅可以提升在ASP.NET中使用...
以上代码实现了一个基本的jQuery div拖动排序效果，结合CSS样式，让元素从左到右逐渐展开。请注意，CSS Scroll Snap和一些过渡效果可能需要现代浏览器支持。在实际应用中，你可能需要根据具体需求进行调整和优化。
在这个场景中，`div层`是指一个HTML的div元素，通过CSS样式控制其位置和外观，而`可拖动`则是指用户可以通过鼠标拖动来改变div的位置。此外，`jQuery div层`指的是使用jQuery来实现这一功能的代码，通过监听鼠标事件...
"上下左右拖动改变`DIV`比例代码"就是解决此类需求的一个解决方案，它提供了两种不同的拖动方式：左右拖动和上下拖动。 1. 左右拖动`DIV`边框： 这种效果允许用户通过鼠标在`div`元素的左右边缘进行拖动，从而改变...
在给定的标题“jquery拖拽排序插件div自由拖动排序代码”中，我们主要讨论的是如何利用jQuery实现一个功能，让用户能够自由地通过拖放操作来对页面上的div元素进行排序。这种功能在许多应用场景中都非常实用，比如...
本示例着重介绍如何利用HTML5实现鼠标拖动图片进行3D旋转的动画效果。 首先，我们需要一个HTML文件作为基础，包含Canvas元素以及用于展示图片的div元素。HTML结构可能如下： ```html <!DOCTYPE html> <title>...
在网页开发中，实现仿Google风格的拖动div功能是一项常见的交互设计，它可以提升用户体验，让用户能够更加直观地操作和浏览网页内容。本教程将深入探讨如何利用HTML、CSS和JavaScript来实现这一功能。 首先，我们...
首先，"可拖动div"是指在HTML页面中，通过JavaScript或者jQuery实现一个div元素，用户可以通过鼠标点击并拖动来改变div的位置。这种功能通常通过监听鼠标的`mousedown`、`mousemove`和`mouseup`事件来实现。当用户按...