`
liss
  • 浏览: 842880 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

javascript拖动小例子

JavaScriptCSSHTML 
阅读更多 
<html>
　　<head>
　　<meta http-equiv="Content" content="text/html;chartset=utf-8">
　　<title>test drag</title>
　　<style type="text/css">
　　<!--
　　.drag {
　　width:100px;
　　height:100px;
　　position:absolute;
　　left:10px;
　　top:10px;
　　background-color:blue;
　　}
　　-->
　　</style>
　　<script type="text/javascript">
　　<!--
　　function drag(target,event)
　　{
　　 var deltaX = event.clientX-parseInt(target.style.left);
　　 var deltaY = event.clientY-parseInt(target.style.top);
　　 
　　 document.attachEvent("onmousemove",movehandle);
　　 document.attachEvent("onmouseup",uphandle);
　　 function movehandle()
　　 {
　　 target.style.left = event.clientX-deltaX;
　　 target.style.top = event.clientY-deltaY;
　　 }
　　 function uphandle()
　　 {
　　 document.detachEvent("onmousemove",movehandle);
　　 document.detachEvent("onmouseup",uphandle);
　　 }
　　}
　　-->
　　</script>
　　</head>
　　<body>
　　<div id="drag1" class="drag" style="left:10px;top:10px;background-color:red;" onmousedown="drag(this,event);" >show me you 2</div>
　　<div id="drag" class="drag" onmousedown="drag(this,event);" style="left:10px;top:10px;">show me you</div>
　　</body>
</html>

 

分享到：
| JavaScript利用ActiveX导出Excel,Word
评论
发表评论

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

相关推荐

    JS拖拽小例子

    一个关于javascript的拖拽的例子，很简单，新手学习用。

    JS 拖拽例子

    这个“JS 拖拽例子”是一个教学实例，旨在展示如何在网页上实现拖放操作。下面我们将详细讨论拖放的基本原理和实现步骤。 首先，拖放功能涉及到两个主要事件：`dragstart` 和 `drop`。当用户开始拖动一个元素时，会...

    bootstarp拖拽布局例子

    在"bootstarp拖拽布局例子"中，我们主要关注的是如何利用Bootstrap的工具和特性来实现用户友好的拖拽布局，这在设计网页时非常实用，尤其是对于希望创建类似于QQ空间小窝布局模式下自由布局的体验。 Bootstrap的...

    小例子，jsp实现的拖拽功能

    这个“小例子，jsp实现的拖拽功能”旨在演示如何在JavaServer Pages（JSP）中集成拖放功能，让用户能够通过鼠标直接拖动元素在页面上进行操作，如移动、排序或者进行其他数据处理。本文将深入探讨这个主题，解释相关...

    JQuery实现的GridView行拖拽例子

    在这个"JQuery实现的GridView行拖拽例子"中，我们将深入探讨如何利用jQuery来实现GridView控件中行的拖放功能，这是一种增强用户交互性和界面动态性的常见方法。 首先，GridView是ASP.NET中用于显示数据的一种Web...

    JS 拖拽的2个例子 各有优缺点

    学习这两个例子，我们可以理解JavaScript拖拽的基本原理，并对比不同实现方式的适用场景。纯JavaScript拖拽适合小型项目，追求轻量化；而基于jQuery UI的拖拽则适用于需要高级特性和跨平台兼容性的复杂应用。在实际...

    js 小项目练习，jQuery 小例子

    在"js 小项目练习，jQuery 小例子"中，我们可以看到几个基于jQuery实现的常见功能： 1. **菜单**：jQuery可以轻松地创建动态菜单，包括下拉菜单、滑动菜单等。通过监听用户的鼠标事件，如hover（悬停）和click...

    move_div.rar_javascript 拖动

    总的来说，掌握JavaScript拖动技术对于前端开发者来说是至关重要的，因为它能为网页增添生动性和用户友好性。通过理解这个示例，你可以进一步提升你的JavaScript技能，并将这种交互式设计应用到实际项目中。

    Demo.rar_DEMO_javascript 拖动

    标题 "Demo.rar_DEMO_javascript 拖动" 暗示了这是一个关于JavaScript实现的交互式表格功能的示例，特别关注于行和列的拖动以及自动排序。在这个项目中，用户可以通过点击表头来对数据进行排序，同时也能通过拖动列...

    Ajax拖拽例子代码

    在这个"Ajax拖拽例子代码"中，我们可以看到如何利用jQuery库来实现类似Chinaren的拖拽界面效果。 首先，我们来看`index.html`，这是网页的主文件，通常包含HTML结构以及引入其他资源如CSS和JavaScript文件的链接。...

    一个基于纯JavaScript实现表格列拖动、排序的功能的js类库源码及例子

    "一个基于纯JavaScript实现表格列拖动、排序的功能的js类库源码及例子" 提供了一个解决方案，让开发者能够轻松地为他们的网页应用添加动态且用户友好的功能。这个类库专门针对表格数据展示，允许用户通过拖动列头来...

    JavaScript实例 菜单特效

    “可拖动的菜单”则是利用了JavaScript的拖放功能。用户可以将菜单项拖动到不同的位置，以自定义菜单布局。这需要实现拖放事件监听，计算拖动元素的位置，并更新DOM结构。 “Flash菜单效果”虽然提及，但在现代Web...

    javascript图片预览（滚动放大缩小和拖动查看）

    总结来说，这个例子展示了如何使用JavaScript（特别是jQuery库）结合HTML和CSS实现图片预览功能，包括滚动时自动放大缩小图片以及拖动查看图片的不同部分。开发者完全自定义了这些行为，提供了良好的用户体验。通过...

    10个图片与布局拖拽例子

    在"10个图片与布局拖拽例子"中，我们可以学习到如何使用JavaScript和CSS来实现这些功能。JavaScript通常用于处理用户的拖放动作，监听鼠标事件，计算元素的位置，并更新DOM以反映这些变化。CSS则用于定义元素的样式...

    ext-2.0.2 （javascript脚本例子）

    当我们谈论"javascript脚本例子"时，这通常指的是EXTJS 2.0.2提供的示例代码。在下载的资源中，"examples"文件夹是核心部分，它包含了大量的演示和教程，展示了EXTJS库的各种功能。开发者可以通过这些示例学习如何...

    拖拽上传控件及其例子

    本文将详细解析"拖拽上传控件及其例子"这一主题，包括核心概念、技术实现以及示例代码。 拖拽上传是利用HTML5的拖放(Drag and Drop)API来实现的一种功能，允许用户直接通过鼠标或触屏设备从桌面或其他网页拖动文件...

    javascript拖拽

    这是3721的页面,这个页面现在已经不可用了,但拖拽很稳定 可以任意拖拽,功能实现的不错,虽然javascript代码很多 但好多都是每个模块中嵌的内容 可以根据自己的需要删减 我已经用这个改写了一个可以拖拽后保存到数据库...

    EXT 控件拖动例子

    在这个"EXT 控件拖动例子"中，我们将深入探讨EXTJS如何实现控件的拖放功能，以及如何在动态布局中运用这一特性。 EXTJS 提供了一个名为`Ext.dd.DragDrop`的接口，它使得在界面上的元素可以被拖动和放置。这个接口...

    extjs小例子

    EXTJS是一种基于JavaScript的前端开发框架，主要用于构建富互联网应用程序（Rich Internet Applications，RIA）。它由Sencha公司开发，提供了一套完整的组件化、可拖拽的用户界面元素，以及强大的数据绑定和数据管理...

    javascript效果例子

    在这个“javascript效果例子”压缩包中，很可能包含了一系列使用JavaScript编写的示例代码，旨在展示如何利用该语言创建各种吸引人的视觉效果和用户交互功能。 1. **DOM操作**：JavaScript可以通过Document Object ...

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