`
caibinghong
  • 浏览: 150103 次
  • 性别: Icon_minigender_1
  • 来自: 福建
社区版块
存档分类
最新评论

javascript 拖拽替换

 
阅读更多

http://www.blueidea.com/tech/web/2006/3791.asp

 

怎么用javascript进行拖拽

本文译自:http://www.webreference.com/programming/javascript/mk/column2/index.html
所有版权归原文所有

Javascript的特点是dom的处理与网页效果,大多数情况我们只用到了这个语言的最简单的功能,比如制作图片轮播/网页的tab等等,这篇文章将向你展示如何在自己的网页上制作拖拽.

有很多理由让你的网站加入拖拽功能,最简单的一个是数据重组.例如:你有一个序列的内容让用户排序,用户需要给每个条目进行输入或者用select选择,替代前面这个方法的就是拖拽.或许你的网站也需要一个用户可以拖动的导航窗口!那么这些效果都是很简单:因为你可以很容易的实现!

网页上实现拖拽其实也不是很复杂.第一你需要知道鼠标坐标,第二你需要知道用户鼠标点击一个网页元素并实现拖拽,最后我们要实现移动这个元素.

运行代码框

 [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

获取鼠标移动信息

第一我们需要获取鼠标的坐标.我们加一个用户函数到document.onmousemove就可以了:

 

 

document.onmousemove = mouseMove;

function mouseMove(ev){
 ev           = ev || window.event;
 var mousePos = mouseCoords(ev);
}

function mouseCoords(ev){
 if(ev.pageX || ev.pageY){
  return {x:ev.pageX, y:ev.pageY};
 }
 return {
  x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
  y:ev.clientY + document.body.scrollTop  - document.body.clientTop
 };
}

 

运行代码框

 [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

分享到:
评论

相关推荐

    JQuery实现图片拖拽替换效果

    在本文中,我们将深入探讨如何使用JQuery库来实现一个有趣的交互功能——图片拖拽替换效果。这个功能允许用户通过拖放操作来替换页面上的图片,增强了用户体验并提供了直观的界面交互。 首先,我们需要理解JQuery的...

    javascript拖拽翻页效果

    JavaScript拖拽翻页效果是一种流行的交互设计,它使得用户可以通过在网页上拖动内容来实现页面的滚动或切换,提供了一种更为直观和流畅的浏览体验。这种效果通常应用于长篇内容的展示,如电子书、画廊或者无限滚动的...

    html5实现单元格内容拖拽替换

    在这个事件中,我们可以获取拖动的数据并替换目标单元格的内容: ```javascript targetTd.addEventListener('drop', function(event) { event.preventDefault(); // 阻止默认的处理方式,如链接跳转 this.class...

    javascript实现拖拽并替换网页块元素

    在很多Web应用中,拖拽功能已经成为一种常见的用户交互方式,而通过JavaScript实现网页元素的拖拽以及元素之间的位置交换(拖拽并替换)则是一项重要的技术点。本篇内容将重点介绍如何使用纯JavaScript来实现网页中...

    dragula图片拖拽替换位置

    "dragula图片拖拽替换位置"是利用H5的拖放API来实现的一项具体应用,允许用户通过鼠标或触摸操作直接在界面上移动元素,从而改变它们的位置。在这个案例中,我们将深入探讨如何使用dragula库来实现这一功能。 ...

    拖动选择替换控件

    在IT行业中,拖动选择替换控件是一种常见的交互设计元素,尤其在图形用户界面(GUI)和富互联网应用(RIA)中广泛使用。这个控件允许用户通过拖动鼠标来选择一个区域,然后用新的内容替换所选区域,极大地提高了操作...

    jQuery拖拽替换效果.zip_drop_forgetxbl_tidewad_web开发

    本资源"jQuery拖拽替换效果.zip_drop_forgetxbl_tidewad_web开发"显然聚焦于利用jQuery实现的拖放(Drag and Drop)功能,并可能涉及到某种特定的效果或组件。让我们详细探讨一下这个主题。 拖放功能在现代Web应用...

    vue和H5 draggable实现拖拽并替换效果

    在Vue框架中实现拖拽功能并使被拖拽的元素能够替换其他元素的位置,是前端开发中常见的交互需求。在本文中,通过使用HTML5原生拖拽API以及Vue框架的响应式特性,实现了拖拽并替换的效果。本文的内容将详细解析如何...

    jquery替换节点

    如果需要根据条件替换特定的子节点,可以先通过选择器找到这些节点,然后执行替换操作。例如,如果我们想替换所有class为"target"的元素,可以这样实现: ```javascript $(".target").replaceWith(function() { ...

    图片瀑布流,可拖动替换位置

    在这个项目中,“图片瀑布流,div可拖动替换位置”意味着网页中的每个图片容器(div)不仅可以按照瀑布流方式进行布局,而且还支持用户通过拖动来更改图片的位置。这样的功能增加了用户的交互性,使他们能够根据个人...

    利用JavaScript实现并页面元素的拖拽.pdf

    实现页面元素的拖拽功能的JavaScript技术研究 本文主要研究了使用JavaScript实现页面元素的拖拽功能,通过自定义模板和标记的方式来实现界面和代码的分离。下面是本文的详细知识点: 1. 自定义模板的概念:自定义...

    Beginning JavaScript

    - DOM的核心功能包括查找、添加、删除、替换节点。 10. **BOM操作**: - BOM(Browser Object Model)浏览器对象模型提供了与浏览器窗口交互的方法和属性。 - 包括弹出新窗口、移动或调整窗口大小等操作。 ####...

    使用JavaScript实现Web程序中多个文本框的批量选择、批量修改

    最近,我使用纯Javascript实现了一个批量修改文本框中的数据的功能,拖动鼠标即可选择页面上(包括GridView中)多个文本框,然后会自动弹出对话框要求用户输入新值。实现方法对TextBox没有侵入性,也不需要修改现有...

    程序天下:JavaScript实例自学手册

    21.4 使用DOM实现控件的替换 21.5 使用DOM实现控件的复制 21.6 使用DOM判断页面中控件是否嵌套 21.7 使用DOM获取页面中某控件的属性 21.8 将某行排在表格的最后 21.9 动态删除页面中的元素 21.10 克隆表格 21.11 ...

    javascript网页特效实例大全

    涉及到Intersection Observer API、滚动事件以及图片源的动态替换。 5. **模态框(Modal Box)**:弹出式窗口,用于显示详细信息或用户交互。关键在于层叠样式(z-index)管理和JavaScript事件管理。 6. **轮盘赌...

    李炎恢javascript代码

    8. **正则表达式**:10章的内容可能涵盖了正则表达式,这是一种强大的文本处理工具,常用于验证输入、查找和替换字符串等任务。 9. **百度分享侧栏**:在项目1的最后部分,提到了实现百度分享侧栏,这涉及到社会化...

    javascript事件列表解说

    - `onunload`:在当前页面将被替换时触发。 4. **表单相关事件**: - `onblur`:当表单元素失去焦点时触发。 - `onchange`:当表单元素内容改变且失去焦点时触发。 - `onfocus`:当表单元素获取焦点时触发。 -...

    JavaScript经典代码大全收集.pdf

    在页面中使用noscript标签可以防止在用户的浏览器禁用JavaScript时,页面内容被空的iframe替换。 这份文档中的代码片段集中展示了JavaScript在网页设计中的强大功能,包括对页面元素的操作、事件处理、页面跳转...

    《程序天下:JavaScript实例自学手册》光盘源码

    21.4 使用DOM实现控件的替换 21.5 使用DOM实现控件的复制 21.6 使用DOM判断页面中控件是否嵌套 21.7 使用DOM获取页面中某控件的属性 21.8 将某行排在表格的最后 21.9 动态删除页面中的元素 21.10 克隆表格 21.11 ...

Global site tag (gtag.js) - Google Analytics