`
songzhan
  • 浏览: 250565 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

JQuery 实现鼠标拖动内容

 
阅读更多

下载一个jquery.easydrag.js。

 

<html>
<head>
	<script type="text/javascript" src="jquery-1.4.3.js"></script>
	<script src="jquery.easydrag.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(document).ready ( function(){
			 $("#divPanel").easydrag();
			 $("#divPanel").setHandler("divTitle");
		});
</script>
</head>
<body>
	<div id="divPanel" style="width:300px;height:300px;background:white;border:1px solid #000000;position:absolute;left:5px;top:50px" >
	<div id="divTitle" style="width:100%;height:25px;background:lavender">
	&nbsp;Title
	</div>
	<div style="width:100%">也可以换成图片
	</div>
	</div>
</body>
</html>

 

 这样写,运行下,就能实现拖动 id="divPanel" 元素内容移动了

 

 

jquery-1.4.3.js  与   jquery.easydrag.js  一起上传了,有兴趣的朋友可以试试

 

分享到:
评论

相关推荐

    jQuery鼠标上下拖动div排序代码

    《jQuery实现鼠标拖动div排序技术详解》 在网页开发中,用户交互体验是至关重要的。其中,元素的可拖动排序功能可以让用户更加直观地调整界面布局,提高使用便捷性。本文将深入探讨如何利用jQuery库实现鼠标上下...

    JQuery实现鼠标拖动元素移动位置(源码+注释)

    本篇文章将详细讲解如何使用jQuery实现鼠标拖动元素并改变其位置的功能,这对于构建交互式用户界面至关重要。 首先,我们需要在HTML页面中引入jQuery库。这通常通过在`&lt;head&gt;`标签内添加以下代码来完成: ```html ...

    jquery 体育馆场馆鼠标拖动事件

    下面将详细探讨jQuery如何实现鼠标拖动事件及其相关知识点。 一、jQuery鼠标拖动事件 在jQuery中,没有直接提供一个名为“拖动”(drag)的事件,但我们可以结合`mousedown`、`mousemove`和`mouseup`事件来模拟...

    jquery实现简单图片的拖动

    "jquery实现简单图片的拖动"这个主题是关于如何利用jQuery的API来实现图片元素的拖放功能,这是一个常见的交互设计,使得用户可以通过鼠标拖动图片在页面上自由移动。 在jQuery中,实现图片拖动主要涉及到`...

    html5+css+jquery通过鼠标拖拽来移动对象位置、改变大小、和旋转的实现

    html5+css+jquery通过鼠标拖拽来移动对象位置、改变大小、和旋转的实现 代码简洁、易懂、易改造

    jQuery slideControl鼠标拖动取值插件代码.zip

    《jQuery slideControl鼠标拖动取值插件代码详解》 jQuery作为一个强大的JavaScript库,因其简洁易用的API和丰富的插件生态,深受开发者喜爱。在众多的jQuery插件中,“jQuery slideControl鼠标拖动取值插件”是一...

    jQuery slideControl鼠标拖动取值插件代码

    《jQuery slideControl鼠标拖动取值插件代码详解》 在网页开发中,交互效果的丰富性和用户体验的优化越来越受到重视。jQuery作为一个轻量级、功能强大的JavaScript库,提供了丰富的API和插件来帮助开发者实现各种...

    jquery鼠标拖动层DIV源代码精简整理版

    要实现鼠标拖动功能,我们需要遵循以下步骤: 1. **选择元素**:使用jQuery的选择器选取要添加拖动功能的`div`元素。例如,`$("#draggableDiv")`将选择ID为`draggableDiv`的元素。 2. **绑定事件**:接着,我们...

    jQuery实现可以拖动及查看自定义坐标刻度尺效果.zip

    本资源"jQuery实现可以拖动及查看自定义坐标刻度尺效果.zip"提供了使用jQuery创建动态、可拖动且带有自定义坐标刻度尺的效果的示例代码。这个功能通常用于数据可视化应用,例如图表、地图或其他需要精确位置指示的...

    jquery实现鼠标拖拽选择

    本文将详细讲解如何使用jQuery实现鼠标拖拽选择的功能。 首先,我们需要理解拖拽(Drag)和选择(Selection)这两个概念。拖拽通常涉及到元素的移动,而选择则是在用户界面中选定一块连续或非连续的区域。在本例中...

    jQuery实现可拖动的无刷新购物车PHP代码.rar

    jQuery实现可拖动的无刷新购物车PHP代码,带有提示功能的商品展示,用鼠标拖动商品到购物车中,即可选中商品,购物车程序可根据拖入的产品数量进行统计,自动给出价格。同时对不满意的商品,可随时从购物车中移除,...

    jQuery鼠标拖动滑块选值代码

    "jQuery鼠标拖动滑块选值代码"是一个典型的例子,它利用jQuery实现了用户可以通过鼠标拖动滑块来选择数值的功能,同时也支持点击滑杆或直接在输入框输入数值。这种功能常见于各种设置面板、游戏控制或数据调整场景。...

    jquery实现可拖动弹出层特效.zip

    "jquery实现可拖动弹出层特效.zip"中的内容显然是关于使用jQuery来创建一个可拖动的弹出层效果,这是一种常见的用户界面元素,用于显示重要的信息或者进行交互操作。下面我们将深入探讨这个主题。 首先,让我们了解...

    jQuery ui鼠标拖动图片摇晃动画效果

    在本文中,我们将深入探讨如何使用jQuery UI库来实现鼠标拖动图片时产生摇晃动画效果。jQuery UI是一个强大的JavaScript库,它扩展了基础的jQuery功能,提供了丰富的用户界面组件和交互效果。在这个特定的场景中,...

    jQuery表格可拖动调整列宽度大小

    2. **事件监听**:jQuery的`on()`函数可以用来监听用户交互,如鼠标按下(`mousedown`)、移动(`mousemove`)和释放(`mouseup`)等事件,这些是实现拖动操作的关键。 3. **样式操作**:在拖动过程中,我们需要改变元素...

    jquery实现div拖动

    标题中的“jQuery实现div拖动”是指利用JavaScript库jQuery来创建一个交互式的功能,使得HTML中的元素可以通过鼠标操作进行拖动。这个功能在网页设计中常常用于创建可自定义布局、可移动的面板或者窗口。下面我们将...

    jquery实现鼠标拖动图片效果示例代码

    本示例将详细讲解如何使用jQuery实现鼠标拖动图片的效果。jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理和动画等功能,使得实现这种效果变得更加简单。 首先,我们来看一下提供的代码片段。在HTML...

    jquery div拖动排序效果代码.zip

    本教程将详细讲解如何利用jQuery实现一个div元素的拖动排序效果,结合CSS样式,创建出一款从左到右慢慢展开且可自由拖动排序的特效。 首先,我们需要在HTML中设置好基础结构。创建一系列的div元素,每个div代表一个...

    可拖动的jQuery便签特效

    【jQuery可拖动便签特效】是一种通过JavaScript库jQuery实现的交互式网页元素,它可以模拟现实生活中便签的可移动性,为用户带来更直观、更有趣的网页体验。这种特效通常用于创建提醒、记录备忘或者展示动态信息,极...

Global site tag (gtag.js) - Google Analytics