下载一个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">
Title
</div>
<div style="width:100%">也可以换成图片
</div>
</div>
</body>
</html>
这样写,运行下,就能实现拖动 id="divPanel" 元素内容移动了
jquery-1.4.3.js 与 jquery.easydrag.js 一起上传了,有兴趣的朋友可以试试
分享到:
相关推荐
《jQuery实现鼠标拖动div排序技术详解》 在网页开发中,用户交互体验是至关重要的。其中,元素的可拖动排序功能可以让用户更加直观地调整界面布局,提高使用便捷性。本文将深入探讨如何利用jQuery库实现鼠标上下...
本篇文章将详细讲解如何使用jQuery实现鼠标拖动元素并改变其位置的功能,这对于构建交互式用户界面至关重要。 首先,我们需要在HTML页面中引入jQuery库。这通常通过在`<head>`标签内添加以下代码来完成: ```html ...
下面将详细探讨jQuery如何实现鼠标拖动事件及其相关知识点。 一、jQuery鼠标拖动事件 在jQuery中,没有直接提供一个名为“拖动”(drag)的事件,但我们可以结合`mousedown`、`mousemove`和`mouseup`事件来模拟...
"jquery实现简单图片的拖动"这个主题是关于如何利用jQuery的API来实现图片元素的拖放功能,这是一个常见的交互设计,使得用户可以通过鼠标拖动图片在页面上自由移动。 在jQuery中,实现图片拖动主要涉及到`...
html5+css+jquery通过鼠标拖拽来移动对象位置、改变大小、和旋转的实现 代码简洁、易懂、易改造
《jQuery slideControl鼠标拖动取值插件代码详解》 jQuery作为一个强大的JavaScript库,因其简洁易用的API和丰富的插件生态,深受开发者喜爱。在众多的jQuery插件中,“jQuery slideControl鼠标拖动取值插件”是一...
《jQuery slideControl鼠标拖动取值插件代码详解》 在网页开发中,交互效果的丰富性和用户体验的优化越来越受到重视。jQuery作为一个轻量级、功能强大的JavaScript库,提供了丰富的API和插件来帮助开发者实现各种...
要实现鼠标拖动功能,我们需要遵循以下步骤: 1. **选择元素**:使用jQuery的选择器选取要添加拖动功能的`div`元素。例如,`$("#draggableDiv")`将选择ID为`draggableDiv`的元素。 2. **绑定事件**:接着,我们...
本资源"jQuery实现可以拖动及查看自定义坐标刻度尺效果.zip"提供了使用jQuery创建动态、可拖动且带有自定义坐标刻度尺的效果的示例代码。这个功能通常用于数据可视化应用,例如图表、地图或其他需要精确位置指示的...
本文将详细讲解如何使用jQuery实现鼠标拖拽选择的功能。 首先,我们需要理解拖拽(Drag)和选择(Selection)这两个概念。拖拽通常涉及到元素的移动,而选择则是在用户界面中选定一块连续或非连续的区域。在本例中...
jQuery实现可拖动的无刷新购物车PHP代码,带有提示功能的商品展示,用鼠标拖动商品到购物车中,即可选中商品,购物车程序可根据拖入的产品数量进行统计,自动给出价格。同时对不满意的商品,可随时从购物车中移除,...
"jQuery鼠标拖动滑块选值代码"是一个典型的例子,它利用jQuery实现了用户可以通过鼠标拖动滑块来选择数值的功能,同时也支持点击滑杆或直接在输入框输入数值。这种功能常见于各种设置面板、游戏控制或数据调整场景。...
"jquery实现可拖动弹出层特效.zip"中的内容显然是关于使用jQuery来创建一个可拖动的弹出层效果,这是一种常见的用户界面元素,用于显示重要的信息或者进行交互操作。下面我们将深入探讨这个主题。 首先,让我们了解...
在本文中,我们将深入探讨如何使用jQuery UI库来实现鼠标拖动图片时产生摇晃动画效果。jQuery UI是一个强大的JavaScript库,它扩展了基础的jQuery功能,提供了丰富的用户界面组件和交互效果。在这个特定的场景中,...
2. **事件监听**:jQuery的`on()`函数可以用来监听用户交互,如鼠标按下(`mousedown`)、移动(`mousemove`)和释放(`mouseup`)等事件,这些是实现拖动操作的关键。 3. **样式操作**:在拖动过程中,我们需要改变元素...
标题中的“jQuery实现div拖动”是指利用JavaScript库jQuery来创建一个交互式的功能,使得HTML中的元素可以通过鼠标操作进行拖动。这个功能在网页设计中常常用于创建可自定义布局、可移动的面板或者窗口。下面我们将...
本示例将详细讲解如何使用jQuery实现鼠标拖动图片的效果。jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理和动画等功能,使得实现这种效果变得更加简单。 首先,我们来看一下提供的代码片段。在HTML...
本教程将详细讲解如何利用jQuery实现一个div元素的拖动排序效果,结合CSS样式,创建出一款从左到右慢慢展开且可自由拖动排序的特效。 首先,我们需要在HTML中设置好基础结构。创建一系列的div元素,每个div代表一个...
【jQuery可拖动便签特效】是一种通过JavaScript库jQuery实现的交互式网页元素,它可以模拟现实生活中便签的可移动性,为用户带来更直观、更有趣的网页体验。这种特效通常用于创建提醒、记录备忘或者展示动态信息,极...