<!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="E:/jquery-1.7.2.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>
分享到：
相关推荐
标题中的“jQuery实现div拖动”是指利用JavaScript库jQuery来创建一个交互式的功能，使得HTML中的<div>元素可以通过鼠标操作进行拖动。这个功能在网页设计中常常用于创建可自定义布局、可移动的面板或者窗口。下面...
本教程将详细讲解如何利用jQuery实现一个div元素的拖动排序效果，结合CSS样式，创建出一款从左到右慢慢展开且可自由拖动排序的特效。 首先，我们需要在HTML中设置好基础结构。创建一系列的div元素，每个div代表一个...
本篇文章将深入探讨如何使用 jQuery Sortable 实现div的拖动排序效果。 首先，你需要在项目中引入 jQuery 和 jQuery UI 的库。jQuery 是一个广泛使用的JavaScript库，而 jQuery UI 提供了包括Sortable在内的多种...
本文实例分析了jQuery实现div拖拽效果。分享给大家供大家参考，具体如下： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head&...
在实现Div拖拽功能时，我们会用到`mousedown`、`mousemove`和`mouseup`这三个鼠标事件。 1. **mousedown**事件：当用户按下鼠标按钮时触发，这是开始拖动操作的起点。我们需要在此事件中记录初始鼠标位置和Div的...
本文实例讲述了jQuery实现Div拖动+键盘控制综合效果的方法。分享给大家供大家参考。具体实现方法如下： 代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...
本示例中的“jquery div容器拖拽放大缩小浮动层代码”是一个利用jQuery实现的功能，允许用户对div元素进行拖动、缩放以及使其在页面上浮动。下面将详细介绍这一功能的实现原理和相关知识点。 1. **jQuery选择器**：...
本教程将深入探讨如何利用jQuery UI库中的Draggable功能来实现div元素的拖动，以及如何通过append方法动态添加元素。首先，我们需要了解jQuery UI库的基本用法。 **jQuery UI Draggable组件** jQuery UI的Draggable...
本示例中，我们将探讨如何利用jQuery实现一个功能丰富的DIV元素：使其既能锁屏，又能进行拖拽操作。这在创建弹出窗口、对话框或者自定义交互界面时非常有用。 首先，要实现这个功能，我们需要确保在HTML文件中引入...
《jQuery实现鼠标拖动div排序技术详解》 在网页开发中，用户交互体验是至关重要的。其中，元素的可拖动排序功能可以让用户更加直观地调整界面布局，提高使用便捷性。本文将深入探讨如何利用jQuery库实现鼠标上下...
基于jQuery插件库实现的jquery.imageView.js插件 当你为图片提供两张大图的时候，单击小图片的时候 触动大图片，支持在div框架内任意拖动查看 使用方法： 1、将附件index.html文件中...
本文将深入探讨如何使用jQuery实现简单的拖拽效果，让你的网页元素能够随心所欲地移动。 首先，拖拽效果的核心在于捕获鼠标事件，包括`mousedown`（鼠标按下）、`mousemove`（鼠标移动）和`mouseup`（鼠标释放）。...
本篇文章将深入讲解如何利用JQuery实现DIV元素的拖拽功能。 首先，确保在项目中引入了JQuery库。你可以通过CDN链接或者本地引入的方式添加JQuery到HTML文件中。例如： ```html <script src="https://code.jquery....
需要注意的是，这种简单的拖动实现可能不适用于所有情况，特别是涉及到滚动条或者窗口大小变化时。对于更复杂的需求，可以考虑使用 jQuery UI 或其他专门的拖放库，如 Interact.js 或 Draggable.js，它们提供了更...
本篇文章将聚焦于一个特定的应用场景：使用jQuery实现拖拽功能来动态添加div，并保存拖拽后的位置效果。这个功能在网页布局、可配置界面或者拖放式应用设计中非常常见。 首先，我们需要理解jQuery UI中的Draggable...
本文实例讲述了jQuery实现简单的DIV拖动效果。分享给大家供大家参考，具体如下： 创建一个HTML文件，复制以下代码进去，修改jquery文件（没有的到网上去下一个，我使用的是jquery-1.8.2），即可以运行了 <!...
在给定的标题“jquery拖拽排序插件div自由拖动排序代码”中，我们主要讨论的是如何利用jQuery实现一个功能，让用户能够自由地通过拖放操作来对页面上的div元素进行排序。这种功能在许多应用场景中都非常实用，比如...
本项目“jQuery可拖拽DIV页面”利用jQuery及其扩展插件jQuery UI，实现了一个用户界面元素（如div）可以被拖动的功能，从而为用户提供更直观的交互体验。以下是对这个知识点的详细讲解： 1. **jQuery基础**：jQuery...