以下的页面中放了两个div,能够通过鼠标拖拽这两个元素到任何位置。

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamFja2ZydWVk/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

实现该效果的HTML页面代码例如以下所看到的:

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style type="text/css">
  7. #xixi {
  8. width:200px; height: 200px; position:absolute;
  9. left: 50px; top: 50px; background-color: lightcyan;
  10. }
  11. #haha {
  12. position:absolute; left:300px; top:300px;
  13. background-color: yellow; width:200px; height: 200px;
  14. }
  15.  
  16. </style>
  17. <script type="text/javascript" src="js/mylib.js"></script>
  18. <script type="text/javascript">
  19. window.onload = function() {
  20. var obj1 = createDraggableObject();
  21. var obj2 = createDraggableObject();
  22. obj1.init($('xixi'));
  23. obj2.init($('haha'));
  24. };
  25. </script>
  26.  
  27. </head>
  28. <body>
  29. <div id="xixi">Fuck!</div>
  30. <div id="haha">Shit!</div>
  31. </body>
  32. </html>

外部JavaScript文件代码例如以下所看到的:

  1. /**
  2. * 依据id获取页面元素
  3. * @param id
  4. * @returns {HTMLElement}
  5. */
  6. function $(id) {
  7. return document.getElementById(id);
  8. }
  9.  
  10. /**
  11. * 创建可拖拽对象的工厂方法
  12. */
  13. function createDraggableObject() {
  14. return {
  15. obj: null, left: 0, top: 0,
  16. oldX: 0, oldY: 0, isMouseLeftButtonDown: false,
  17. init: function (obj) {
  18. this.obj = obj;
  19. var that = this;
  20. this.obj.onmousedown = function (args) {
  21. var evt = args || event;
  22. this.style.zIndex = 100;
  23. that.isMouseLeftButtonDown = true;
  24. that.oldX = evt.clientX;
  25. that.oldY = evt.clientY;
  26. if (this.currentStyle) {
  27. that.left = parseInt(this.currentStyle.left);
  28. that.top = parseInt(this.currentStyle.top);
  29. }
  30. else {
  31. var divStyle = document.defaultView.getComputedStyle(this, null);
  32. that.left = parseInt(divStyle.left);
  33. that.top = parseInt(divStyle.top);
  34. }
  35. };
  36. this.obj.onmousemove = function (args) {
  37. that.move(args || event);
  38. };
  39. this.obj.onmouseup = function () {
  40. that.isMouseLeftButtonDown = false;
  41. this.style.zIndex = 0;
  42. };
  43. },
  44. move: function (evt) {
  45. if (this.isMouseLeftButtonDown) {
  46. var dx = parseInt(evt.clientX - this.oldX);
  47. var dy = parseInt(evt.clientY - this.oldY);
  48. this.obj.style.left = (this.left + dx) + 'px';
  49. this.obj.style.top = (this.top + dy) + 'px';
  50. }
  51. }
  52. };
  53. }

JavaScript实现网页元素的拖拽效果的更多相关文章

  1. JavaScript实现最简单的拖拽效果

    一.一些无关痛痒的唠叨 拖拽还是挺不错的一个页面效果,我个人认为,其生命力在于可以让用户自己做一些操作,所谓自定义.例如: ①浏览器标签顺序的拖拽切换 现在基本上所有的选项卡式的浏览器都有顺序拖拽切换 ...

  2. 用JavaScript实现div的鼠标拖拽效果

    实现原理鼠标按下时根据onmousemove事件来动态获取鼠标坐标位置以此来更新div的位置,实现的前提时div要有一个定位效果,不然的话是移动不了它的. HTML <div class=&qu ...

  3. JavaScript实现水平进度条拖拽效果

    <html> <head> <meta charset="UTF-8"> <title>Document</title> ...

  4. 使用mousedown、mousemove、mouseup实现拖拽效果

    如何实现一个元素的拖拽效果,使用原生的js实现,习惯了jquery的同学们,你们自己写了吗?N久使用mvvm框架,不写jquery的东西,感觉自己完全不会了. 话不多说,直接上code.本例子以简单的 ...

  5. javascript小实例,PC网页里的拖拽

    几年前,我参与设计开发一个房产网的项目,我负责前端工作,由于项目经理要求比较高,参考了很多房产类网站比较优秀的功能,想把别人比较优秀的设计和想法集合到一起,那时的设计稿和功能实现,简直就是改了又改,今 ...

  6. javascript小实例,PC网页里的拖拽(转)

    这是现在的效果,可能改了一些,原来的效果是,里面的这张图是可以上下左右拖动的,然后房子上面的显示的楼栋号,也跟着图片一起移动,当时js能力还不行,未能实现项目经理的要求,不过后来项目经理又把这个效果推 ...

  7. 拖拽系列一、JavaScript实现简单的拖拽效果

        前端拖拽相关应用汇总 在现实生活中就像男孩子牵着(拖着)女朋友的手穿过马路:从马路的一端走到另一端这种场景很常见: 而在前端开发中拖拽效果也算是前端开发中应用最常见.最普遍的特效:其拖拽涉及知 ...

  8. Javascript实现鼠标框选元素后拖拽被框选的元素

    之前需要做一个框选元素后拖拽被框选中的元素功能,在网上找资料做了一些修改,基本达到了需要的效果,希望对也需要实现框选后拖拽元素功能的人有用. 页面加载后效果 框选后的内容可以拖拽,如下图: 代码下载

  9. 学习笔记---Javascript事件Event、IE浏览器下的拖拽效果

    学习笔记---Javascript事件Event.IE浏览器下的拖拽效果     1. 关于event常用属性有returnValue(是否允许事件处理继续进行, false为停止继续操作).srcE ...

随机推荐

  1. [python][django学习篇][3]创建django web的数据库模型

    推荐学习博客:http://pythonzh.cn/post/8/ 博客或者web界面向用户展示内容,它需要从某个地方获取博客内容或者web界面内容,才能够展示出来.通常来说:某个地方指的就是数据库 ...

  2. python 打印9*9乘法表

    # -*- coding: utf8 -*- # Author:wxq 1. for i in range(1,10): for j in range(1,i+1): print "%d*% ...

  3. 使用jsp读取TXT格式文件

    <%@page import="java.io.BufferedReader"%> <%@page import="java.io.FileReader ...

  4. java如何建项目

    java常开发的项目有哪几种? 这几种项目都是怎么建的?

  5. 【bzoj2127】happiness 网络流最小割

    题目描述 高一一班的座位表是个n*m的矩阵,经过一个学期的相处,每个同学和前后左右相邻的同学互相成为了好朋友.这学期要分文理科了,每个同学对于选择文科与理科有着自己的喜悦值,而一对好朋友如果能同时选文 ...

  6. WS-*协议栈及相关概念

    1. 什么是WS-Security? WS-Security 是一个 SOAP 的扩展,它提供了对 SOAP 消息的认证和加密. 在介绍 WS-Security 之前,我们有必要了解一下 WS-Sec ...

  7. [TC_SRM_460]TheCitiesAndRoadsDivOne

    [TC_SRM_460]TheCitiesAndRoadsDivOne 试题描述 John and Brus have become very famous people all over the w ...

  8. wewe

    <#assign base=rc.contextPath /> <#import "spring.ftl" as s /> <!DOCTYPE htm ...

  9. caffe+Ubuntu14.04.10 +cuda7.0/7.5+CuDNNv4 安装

    特别说明: Caffe 官网地址:http://caffe.berkeleyvision.org/ 本文为作者亲自实验完成,但仅限用于学术交流使用,使用本指南造成的任何不良后果由使用者自行承担,与本文 ...

  10. codeforces 757F - 最短路DAG+灭绝树

    Description 给定一个n个点,m条边的带权无向图,和起点S.请你选择一个点u(u!=S),使得在图中删掉点u 后,有尽可能多的点到S的最短距离改变. Solution 先建出最短路DAG,在 ...