<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<style type="text/css">
/*模块拖拽*/
.drag{position:absolute;width:100px;height:100px;border:1px solid #ddd;background:#FBF2BD;text-align:center;padding:5px;top:100px;left:20px;cursor:move;}
</style>
<script type="text/javascript">
// 模块拖拽
$(function(){
var _move=false;//移动标记
var _x,_y;//鼠标离控件左上角的相对位置
$(".drag").click(function(){
//alert("click");//点击（松开后触发）
}).mousedown(function(e){
_move=true;
_x=e.pageX-parseInt($(".drag").css("left"));
_y=e.pageY-parseInt($(".drag").css("top"));
// $(".drag").fadeTo(20, 0.5);//点击后开始拖动并透明显示
});
$(document).mousemove(function(e){
if(_move){
var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
var y=e.pageY-_y;
$(".drag").css({top:y,left:x});//控件新位置
}
}).mouseup(function(){
_move=false;
$(".drag").fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明
});
});
</script>
</head>
<body>
<!--模块拖拽--> <div class="drag">这个可以拖动哦 ^_^</div>
</body>
</html>
来自：http://blog.csdn.net/lyflcear/article/details/7800960
相关推荐
"jquerydiv 移动DIV"这个标题指的是利用jQuery来实现对网页中DIV元素的动态移动效果。虽然jQuery使得创建复杂的动画变得相对容易，但有时候可能涉及到的代码会比较复杂，尤其是当需要实现特定的交互或过渡效果时。 ...
下面，我们将深入探讨这个主题，并结合“描述”中的“值得拥有”，来展示jQuery在处理div移动上的强大功能。 首先，让我们了解基础。在HTML中，div是一个块级元素，常用于组织页面结构。要移动一个div，我们需要...
本教程将详细讲解如何利用jQuery实现一个div元素的拖动排序效果，结合CSS样式，创建出一款从左到右慢慢展开且可自由拖动排序的特效。 首先，我们需要在HTML中设置好基础结构。创建一系列的div元素，每个div代表一个...
此外，为了在移动设备上实现良好的触摸滑动体验，我们可以使用jQuery Mobile库，它提供了内置的滑动支持。或者，可以使用第三方库如Swiper.js或Slick.js，它们提供了更高级的功能和性能优化。 在实际项目中，你可能...
本示例中的“jquery div容器拖拽放大缩小浮动层代码”是一个利用jQuery实现的功能，允许用户对div元素进行拖动、缩放以及使其在页面上浮动。下面将详细介绍这一功能的实现原理和相关知识点。 1. **jQuery选择器**：...
本知识点将详细讲解如何使用jQuery创建一个基于div的下拉框，实现下拉列表的功能。 首先，理解jQuery的核心概念。jQuery通过选择器选中DOM元素，然后对这些元素进行操作。例如，`$("#myDiv")`会选中ID为"myDiv"的...
本教程将深入探讨如何利用jQuery UI库中的Draggable功能来实现div元素的拖动，以及如何通过append方法动态添加元素。首先，我们需要了解jQuery UI库的基本用法。 **jQuery UI Draggable组件** jQuery UI的Draggable...
"Jquery跟随滚动条移动的div动画效果"就是一个典型的例子，它利用jQuery库实现了一个div元素随着页面滚动条移动而同步移动的特效，而且这个div在移动过程中保持平滑，避免了闪烁现象，提升了用户体验。 首先，...
移动时，更新div的位置；松开鼠标时，结束拖动。 ```javascript $(document).ready(function() { $('.draggable').on('mousedown', function(e) { $(this).addClass('dragging'); var dragItem = $(this); var ...
在这个场景中，"jquery div 可拖拽弹出对话框" 指的是利用 jQuery 实现的一个功能，允许用户可以手动拖动 HTML 的 `div` 元素（通常用于创建对话框或模态窗口）在页面上自由移动。这种功能提高了用户体验，让用户...
本文将深入探讨如何使用 jQuery 来实现一个div模块的轮播切换效果，这种效果通常用于展示多个图片或内容块，使得用户可以在有限的页面空间内浏览更多的信息。 首先，我们需要在HTML中创建轮播的基础结构。这通常...
jquery实现div上下移动 <div> <div class="pt"> ;" onclick="up(this);">上移 ;" onclick="down(this);">下移 内容一 </div> <div class="pt"> ;" onclick="up(this);">上移 ;" onclick="down(this);">下移 ...
当用户对div格子执行拖动操作时，jQuery监听到鼠标点击、移动和释放等事件，然后通过计算鼠标相对于元素的初始位置和移动距离，动态更新div的位置。这涉及到JavaScript中的事件绑定、坐标计算以及CSS属性的修改，...
### jQuery实现div跟随鼠标移动的知识点 #### 1. jQuery基础 在深入讨论如何使用jQuery实现div跟随鼠标移动之前，需要了解jQuery的基本概念。jQuery是一个快速、小巧、功能丰富的JavaScript库，通过使用jQuery，...
本项目“jQuery可拖拽DIV页面”利用jQuery及其扩展插件jQuery UI，实现了一个用户界面元素（如div）可以被拖动的功能，从而为用户提供更直观的交互体验。以下是对这个知识点的详细讲解： 1. **jQuery基础**：jQuery...
本篇文章将深入探讨如何使用 jQuery Sortable 实现div的拖动排序效果。 首先，你需要在项目中引入 jQuery 和 jQuery UI 的库。jQuery 是一个广泛使用的JavaScript库，而 jQuery UI 提供了包括Sortable在内的多种...
本篇文章将深入讲解如何利用JQuery实现DIV元素的拖拽功能。 首先，确保在项目中引入了JQuery库。你可以通过CDN链接或者本地引入的方式添加JQuery到HTML文件中。例如： ```html <script src="https://code.jquery....
标题“Jquery div、图片水平滚动到最后一张”涉及的是使用jQuery来实现一个功能，即在一个div容器内，使其中包含的图片能够自动从左到右水平滚动，并在滚动到最后一张后重新开始循环。 首先，我们需要理解jQuery中...
页面容器（page container）是jQuery Mobile组织页面的基本单元，它可以是`div`或其他元素，通过"data-role='page'"标识。路由管理则帮助应用处理页面之间的导航，确保正确的页面在正确的时间加载和显示。 总的来说...
"jQuery左右移动图片"是一个常见的网页交互功能，它允许用户通过点击或滑动按钮来浏览一组图片，从第一张平滑过渡到最后一张，或者从最后一张回到第一张，形成一个无缝循环的视觉体验。这个功能的实现基于JavaScript...