`
xinyao
  • 浏览: 99122 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

简单鼠标拖动效果drag

HTML 
阅读更多
1、代码没几行，直接粘帖，以后有个参考： 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 用ondrag事件简单的实现鼠标拖动物件 </TITLE>
</HEAD>
<BODY>
<script>
//Dhtml:用ondrag事件简单的实现鼠标拖动物件.

//releaseCapture
//函数功能：该函数从当前线程中的窗口释放鼠标捕获，并恢复
//通常的鼠标输入处理。捕获鼠标的窗口接收所有的鼠标输入（无论光标的位置在哪里），
//除非点击鼠标键时，光标热点在另一个线程的窗口中
var xx=0,yy=0;
function setCapture1(a){
	//捕获鼠标事件
	//setCapture();
	xx=event.x-a.offsetLeft;yy=event.y-a.offsetTop;
}
function setdrag(a){
	a.style.left=event.x-xx;a.style.top=event.y-yy;
}
</script>
<img src="http://hiphotos.baidu.com/zf8848/abpic/item/6e9e50fb71a866306c22eb09.jpg" style='position:absolute;'
 ondragstart="setCapture(),setCapture1(this);" ondrag='setdrag(this);' ondragend="releaseCapture();">
</BODY>
</HTML>
分享到：
| jQuery.extend函数学习
评论
发表评论

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

相关推荐

    drag拖动效果 类似博客163模块拖动效果

    本教程将详细讲解如何实现一个类似博客163模块的拖动效果，以及如何保存这种拖动状态。我们将主要关注以下几个关键知识点： 1. **HTML5拖放API**：HTML5引入了一套完整的拖放API，使得在网页上实现拖放功能变得简单...

    jquery div页面图片浮动层鼠标拖动效果代码.zip

    标题“jquery div页面图片浮动层鼠标拖动效果代码.zip”表明这个压缩包包含了一个实现jQuery的div元素（通常用于创建浮动层）上的图片拖动效果的代码示例。这种效果可以应用于各种场景，如图片查看器、拖放功能或者...

    easyui-鼠标拖动效果

    在 "easyui-鼠标拖动效果" 这个主题中，我们主要探讨的是如何利用 EasyUI 实现元素的拖放（Drag and Drop）功能。 拖放功能在用户交互中非常常见，例如在文件管理器中移动文件或在日历应用中调整事件时间。在 ...

    js 鼠标拖动对象 可让任何div实现拖动效果.docx

    本篇文章将详细介绍如何使用JavaScript实现一个简单的鼠标拖动对象功能，使得任何div元素都可以具备拖动效果。 首先，我们需要创建一个函数，这个函数会处理鼠标的按下、移动和释放事件，从而实现div的拖动。下面是...

    drag拖动插件

    例如，可以设置拖动的限制区域、鼠标按钮触发拖动的类型等。同时，插件还提供了一系列的事件回调，如`start`、`drag`和`stop`，开发者可以通过这些事件来控制拖动过程中的行为。 除了基本的拖放，"drag拖动插件"还...

    jQuery鼠标拖动的特效

    下面是一个简单的jQuery鼠标拖动特效实现步骤： 1. **初始化**：首先，我们需要选择要拖动的元素，并绑定`mousedown`事件。在`mousedown`事件的回调函数中，记录初始鼠标位置和元素当前位置。 2. **拖动过程**：当...

    JQuery拖放，拖拽到指定的位置，拖拽元素，鼠标拖动

    拖放（Drag and Drop）是用户交互的一种常见方式，允许用户通过鼠标将一个元素从一处拖动到另一处。在jQuery中，可以使用`.draggable()`和`.droppable()`这两个插件来实现这一功能。首先，我们需要理解这两个方法的...

    drag_layer.rar_DRAG_LAYER_Drag.js p_layui drag_layui 拖拽_visual c

    5. **样式调整**：在拖动过程中，可能需要通过CSS来改变元素的视觉反馈，比如添加高亮效果。 "visual_c"可能是指在设计拖放交互时，借助某种可视化编辑工具（如Visual Studio Code或类似工具）辅助编写和调试代码，...

    拖动的类,拖动的控件drag

    根据给定的信息，本文将详细解释“拖动的类，拖动的控件drag”这一概念，包括如何在...这种方法不仅适用于简单的拖拽效果，还可以扩展到更复杂的应用场景中。理解这些基本概念和技术点对于Web开发者来说是非常重要的。

    flash as3 拖动效果

    总的来说，Flash AS3的拖动效果是通过添加事件监听器、控制对象的drag方法以及可能的边界限制和动画效果实现的。这是一种增强用户交互体验的重要技术，广泛应用于各种Web应用和游戏开发中。通过理解并掌握这些基础...

    Qt qml实现无标题栏菜单栏窗口 鼠标拖动代码

    标题所提到的"Qt qml实现无标题栏菜单栏窗口 鼠标拖动代码"是关于创建一个没有传统标题栏，但仍然具有菜单栏功能的窗口，并且该窗口可以通过鼠标进行拖动的操作。这种设计常见于现代应用，以提供更加简洁和自定义的...

    DragObject

    总的来说，`DragObject`是Silverlight中实现拖放功能的关键组件，它封装了拖动元素的相关信息和操作逻辑，使得拖放操作变得简单易用。通过对`DragObject`的理解和实践，开发者可以为用户创造更直观、更富于互动性的...

    HTML5 Canvas实现的糖果鼠标拖动弹性动画特效源码.zip

    在`drag`函数中，我们将计算鼠标位置与糖果之间的距离，并根据这个距离改变糖果的位置，实现拖动效果。 接下来，我们要关注的是动画的实现。HTML5 Canvas没有内置的动画框架，但我们可以利用`requestAnimationFrame...

    仿天猫drag验证的特效

    3. **CSS样式调整**：为了实现视觉上的拖动效果，需要通过CSS来改变被拖元素和目标区域的样式。这可能包括添加过渡效果、高亮显示目标区域、隐藏原始位置的元素等。 4. **边界检测与限制**：在仿天猫的验证特效中，...

    前端项目-d3-drag.zip

    "前端项目-d3-drag.zip" 是一个基于D3.js实现的拖放功能的项目，特别关注的是D3的drag行为模块，这个模块使得在SVG、HTML或Canvas上实现鼠标或触摸输入的拖放操作变得简单易行。接下来，我们将深入探讨D3.js以及其...

    DragAndDrop_Demo源码

    它可能包含了一个简单的C++应用程序，演示了如何处理鼠标事件，捕获拖动开始、拖动过程中以及释放时的动作，以及如何在不同的窗口或控件之间交换数据。通过分析和运行这个源码，开发者可以深入学习C++的事件驱动编程...

    Jquery拖动层效果，简单实用

    本文将深入探讨如何使用jQuery实现一个简单的拖动层（draggable layer）效果，这是一种用户交互功能，允许用户通过鼠标点击并拖动元素在页面上移动。 首先，我们需要确保已经引入了jQuery库。这通常通过在HTML文件...

    The Drag and Drop Component Suite for Delphi XE10

    拖放（Drag and Drop）功能就是这样的一个特性，它使得用户可以通过鼠标简单地移动对象来完成一系列操作。对于Delphi开发者来说，"The Drag and Drop Component Suite for Delphi XE10"是一款非常实用的工具，它极大...

    用jquery写的拖动效果!

    总结起来，jQuery提供的事件监听和DOM操作使得实现拖动效果变得简单易行。通过理解上述代码，你可以根据项目需求对其进行定制，创造出更丰富的交互体验。在压缩包文件"jq拖动实例"中，你应该能找到一个实际的示例，...

    页面拖拽碰撞排序效果

    这个技术允许用户通过鼠标拖动页面上的元素（通常是divs），并与其他元素发生碰撞时进行自动定位。这种方式极大地提高了用户的参与度和操作便捷性，尤其适用于需要用户自定义布局或排序的应用场景，如任务管理工具、...

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