<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单拖曵原理实例</title>
<style type="text/css">
#drag{width:400px;height:300px;background:url(http://upload.yxgz.cn/uploadfile/2009/0513/20090513052611873.jpg);cursor:move;position:absolute;top:100px;left:100px;border:solid 1px #ccc;}
h2{color:#fff;background: none repeat scroll 0 0 rgba(16, 90, 31, 0.7);color:#FFFFFF;height:40px;line-height:40px;margin:0;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
/*--------------拖曳效果----------------
*原理：标记拖曳状态dragging ,坐标位置iX, iY
* mousedown:fn(){dragging = true, 记录起始坐标位置，设置鼠标捕获}
* mouseover:fn(){判断如果dragging = true, 则当前坐标位置 - 记录起始坐标位置，绝对定位的元素获得差值}
* mouseup:fn(){dragging = false, 释放鼠标捕获，防止冒泡}
*/
var dragging = false;
var iX, iY;
$("#drag").mousedown(function(e) {
dragging = true;
iX = e.clientX - this.offsetLeft;
iY = e.clientY - this.offsetTop;
this.setCapture && this.setCapture();
return false;
});
document.onmousemove = function(e) {
if (dragging) {
var e = e || window.event;
var oX = e.clientX - iX;
var oY = e.clientY - iY;
$("#drag").css({"left":oX + "px", "top":oY + "px"});
return false;
}
};
$(document).mouseup(function(e) {
dragging = false;
$("#drag")[0].releaseCapture();
e.cancelBubble = true;
})
})
</script>
</head>
<body>
<div id="drag">
<h2>来拖动我啊</h2>
</div>
</body>
</html>
分享到：
相关推荐
本文将深入探讨如何使用jQuery实现简单的拖拽效果，让你的网页元素能够随心所欲地移动。 首先，拖拽效果的核心在于捕获鼠标事件，包括`mousedown`（鼠标按下）、`mousemove`（鼠标移动）和`mouseup`（鼠标释放）。...
"JQueryUI拖拽效果"是其中的一个核心功能，它允许用户通过简单的API调用来实现元素在页面上的拖放操作。 1. **拖拽功能的实现** jQueryUI的`draggable()`方法用于将任何HTML元素变为可拖动的对象。只需在目标元素...
除了基础的拖拽功能，还可以通过插件如jQuery UI的Draggable和Droppable组件来增强功能，提供更多定制选项和交互效果。这些插件提供了丰富的API和文档，可以帮助开发者实现更复杂的需求。 总结，jQuery的拖拽功能...
jQuery Sortable是jQuery UI的一部分，它允许用户通过简单的拖拽操作来重新排列列表项、div或其他HTML元素，从而实现动态界面交互。 ### jQuery Sortable基本使用 `jQuerySortable`的工作原理是通过监听鼠标事件，...
综上所述，jQuery Gridly 拖拽排序插件提供了强大的布局管理和拖放功能，其回调机制则为开发者提供了获取拖动位置信息的能力，进而实现各种定制化的交互体验。无论你是构建一个简单的卡片布局还是一个复杂的项目管理...
jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理和动画制作等任务，使得创建交互式的网页变得更加简单。在这个项目中，我们将学习以下几个关键知识点： 1. **jQuery选择器**：jQuery选择器用于选取HTML...
首先，jQuery UI库提供了一个内置的`draggable()`方法，使得实现拖拽效果变得非常简单。但是，根据提供的标题和描述，我们将探讨一种不依赖jQuery UI的自定义实现方式。这种自定义实现可能更轻量级，适合那些只想...
"jQuery简单拖拽层"是一个功能，允许用户通过鼠标操作将页面上的元素（如div、图像等）拖动到不同的位置，增强用户交互体验。这个功能在创建可自定义布局、设置窗口位置或构建拖放式界面时非常有用。 实现jQuery...
在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件处理和动画效果。本篇文章将深入探讨jQuery中的拖放功能，以及如何实现元素拖放到指定位置的效果。 拖放（Drag and Drop）是用户...
在本文中，我们将深入探讨如何使用jQuery库来创建一个动态的、可拖动排序的图片列表，以此实现“jQuery动画图片拖动排序效果”。这个功能是通过jQuery的事件监听、DOM操作以及动画功能来实现的，它使得用户可以通过...
3. **浏览器兼容性**：虽然jQuery尽力实现了跨浏览器的兼容，但仍然需要测试不同浏览器下的拖放效果。 4. **数据验证**：在接收拖放操作时，可能需要检查是否允许拖放到特定位置，防止非法操作。 通过以上的步骤，...
"jQuery窗体拖动布局"技术就是这种体验的一种体现，它允许用户通过简单的鼠标拖动操作来调整页面上各个窗体的位置，以满足个性化的需求。jQuery，作为一款强大的JavaScript库，提供了丰富的功能和简便的API，使得...
"jQuery鼠标拖拽组织结构图代码"提供了一种动态、直观的方式来呈现复杂的数据结构，使得用户可以通过简单的鼠标操作来理解并调整组织结构。这个功能的实现主要依赖于两个核心库：bootstrap.min.css和jquery.1.7.1....
《jQuery拖动拖拽插件draggabilly.pkgd.js详解》 在现代网页开发中，用户交互体验的提升已经成为了一项重要的设计考量。其中，拖放（Drag and Drop）功能作为增强用户交互的一种手段，被广泛应用在各种场景，如文件...
【jQuery可拖动便签特效】是一种通过JavaScript库jQuery实现的交互式网页元素，它可以模拟现实生活中便签的可移动性，为用户带来更直观、更有趣的网页体验。这种特效通常用于创建提醒、记录备忘或者展示动态信息，极...
本文将深入探讨如何使用jQuery实现一个简单的拖动层（draggable layer）效果，这是一种用户交互功能，允许用户通过鼠标点击并拖动元素在页面上移动。 首先，我们需要确保已经引入了jQuery库。这通常通过在HTML文件...
在本文中，我们将深入探讨如何使用jQuery库来实现图片的左右移动效果，即所谓的滑动切换功能。这种效果常用于创建动态的图像展示或轮播图组件，为用户带来更丰富的交互体验。jQuery是一个轻量级、高性能的JavaScript...
jQuery，作为一个强大的JavaScript库，提供了丰富的API来简化DOM操作，使得实现拖拽功能变得简单易行。本文将详细介绍一个好用实用的jQuery拖拽插件，帮助开发者轻松实现拖放功能。 ### 1. jQuery UI Draggable ...
jQuery提供了强大的插件和API，使得实现这些功能变得简单易行。 首先，我们来看一下如何实现基本的拖拽功能。jQuery UI库提供了一个名为`draggable()`的函数，它可以将任何HTML元素变为可拖动的。通过为元素添加...
**jQuery拖拽布局插件Portal详解** jQuery是一个广泛使用的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理以及动画效果。"jQuery拖拽布局插件Portal"是基于jQuery的一个扩展，专门用于实现用户界面...