`
piperzero
  • 浏览: 3555021 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

jquery实现鼠标拖动

 
阅读更多
<html>
<head>
<script type='text/javascript' src='js/jquery-1.5.1.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
var mouseX=0,mouseY=0;
var divLeft,divTop;
$('.dragMe').mousedown(function(e){
mouseX=e.pageX;
mouseY=e.pageY;
var offset=$(this).offset();
divLeft=parseInt(offset.left,10);
divTop=parseInt(offset.top,10);
$(this).bind('mousemove',dragElement);
});
function dragElement(event){
var left=divLeft+(event.pageX-mouseX);
var top=divTop+(event.pageY-mouseY);
$(this).css({
'top': top+'px',
'left': left+'px',
'position':'absolute',
'background-color':'blue'
});
}
$(document).mouseup(function(){
$('.dragMe').unbind('mousemove').css('background-color','#ccc');
});
});
</script>
<style type='text/css'>
div{
background-color:#ccc;
height:200px;
width:300px;
font-color:green;
margin:10px;
float:left;
text-align:center;
}
</style>
</head>
<body>
<div class='dragMe'>Drag ME</div>
<div class="dragMe">Drag Me</div>
</body>
</html>
分享到：
| jquery中实现全选按钮
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JQuery 实现鼠标拖动内容

    本篇文章将详细讲解如何利用jQuery实现鼠标拖动内容的功能，结合给定的文件"jquery-1.4.3.js"（jQuery的核心库）和"jquery.easydrag.js"（一个jQuery插件，用于实现拖拽效果），我们将深入理解这一功能的实现原理和...

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

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

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

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

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

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

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

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

    jQuery鼠标拖动图片放入购物车特效源码.zip

    《jQuery实现鼠标拖动图片至购物车特效技术详解》 在网页交互设计中，动态效果的运用能够极大地提升用户体验，其中“鼠标拖动图片放入购物车”特效是一种常见且实用的功能。本篇将深入探讨如何利用jQuery库实现这一...

    jQuery鼠标拖动改变数值大小代码.zip

    《jQuery实现鼠标拖动改变数值大小的技术解析》 在网页开发中，用户交互性是提升用户体验的关键因素之一。本文将详细解析如何利用jQuery库来实现一个功能：通过鼠标拖动来改变页面上某个数值的大小。这个功能常见于...

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

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

    jquery实现简单图片的拖动

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

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

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

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

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

    鼠标拖动，非常好的。

    使用jQuery实现鼠标拖动的基本步骤如下： 1. **选择元素**：首先，你需要选择要启用拖动功能的元素，可以使用jQuery的选择器，例如`$("#draggableElement")`。 2. **绑定事件**：然后，为该元素绑定`mousedown`、`...

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

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

    jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】

    本实例将详细讲解如何使用jQuery实现鼠标拖动浮层的功能，特别是拖动`div`等任何标签。 首先，我们需要引入jQuery库。在这个例子中，我们使用了百度CDN上的jQuery 2.0.3版本。引入jQuery库的HTML代码如下： ```...

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

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

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

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

    jquery实现鼠标拖拽选择

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

    jQuery鼠标拖动滑块选值代码

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

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

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

Magicbox
Global site tag (gtag.js) - Google Analytics