JavaScript实现网页元素的拖拽效果
以下的页面中放了两个div,能够通过鼠标拖拽这两个元素到任何位置。
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamFja2ZydWVk/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
实现该效果的HTML页面代码例如以下所看到的:
- <!DOCTYPE html>
- <html>
- <head lang="en">
- <meta charset="UTF-8">
- <title></title>
- <style type="text/css">
- #xixi {
- width:200px; height: 200px; position:absolute;
- left: 50px; top: 50px; background-color: lightcyan;
- }
- #haha {
- position:absolute; left:300px; top:300px;
- background-color: yellow; width:200px; height: 200px;
- }
- </style>
- <script type="text/javascript" src="js/mylib.js"></script>
- <script type="text/javascript">
- window.onload = function() {
- var obj1 = createDraggableObject();
- var obj2 = createDraggableObject();
- obj1.init($('xixi'));
- obj2.init($('haha'));
- };
- </script>
- </head>
- <body>
- <div id="xixi">Fuck!</div>
- <div id="haha">Shit!</div>
- </body>
- </html>
外部JavaScript文件代码例如以下所看到的:
- /**
- * 依据id获取页面元素
- * @param id
- * @returns {HTMLElement}
- */
- function $(id) {
- return document.getElementById(id);
- }
- /**
- * 创建可拖拽对象的工厂方法
- */
- function createDraggableObject() {
- return {
- obj: null, left: 0, top: 0,
- oldX: 0, oldY: 0, isMouseLeftButtonDown: false,
- init: function (obj) {
- this.obj = obj;
- var that = this;
- this.obj.onmousedown = function (args) {
- var evt = args || event;
- this.style.zIndex = 100;
- that.isMouseLeftButtonDown = true;
- that.oldX = evt.clientX;
- that.oldY = evt.clientY;
- if (this.currentStyle) {
- that.left = parseInt(this.currentStyle.left);
- that.top = parseInt(this.currentStyle.top);
- }
- else {
- var divStyle = document.defaultView.getComputedStyle(this, null);
- that.left = parseInt(divStyle.left);
- that.top = parseInt(divStyle.top);
- }
- };
- this.obj.onmousemove = function (args) {
- that.move(args || event);
- };
- this.obj.onmouseup = function () {
- that.isMouseLeftButtonDown = false;
- this.style.zIndex = 0;
- };
- },
- move: function (evt) {
- if (this.isMouseLeftButtonDown) {
- var dx = parseInt(evt.clientX - this.oldX);
- var dy = parseInt(evt.clientY - this.oldY);
- this.obj.style.left = (this.left + dx) + 'px';
- this.obj.style.top = (this.top + dy) + 'px';
- }
- }
- };
- }
JavaScript实现网页元素的拖拽效果的更多相关文章
- JavaScript实现最简单的拖拽效果
一.一些无关痛痒的唠叨 拖拽还是挺不错的一个页面效果,我个人认为,其生命力在于可以让用户自己做一些操作,所谓自定义.例如: ①浏览器标签顺序的拖拽切换 现在基本上所有的选项卡式的浏览器都有顺序拖拽切换 ...
- 用JavaScript实现div的鼠标拖拽效果
实现原理鼠标按下时根据onmousemove事件来动态获取鼠标坐标位置以此来更新div的位置,实现的前提时div要有一个定位效果,不然的话是移动不了它的. HTML <div class=&qu ...
- JavaScript实现水平进度条拖拽效果
<html> <head> <meta charset="UTF-8"> <title>Document</title> ...
- 使用mousedown、mousemove、mouseup实现拖拽效果
如何实现一个元素的拖拽效果,使用原生的js实现,习惯了jquery的同学们,你们自己写了吗?N久使用mvvm框架,不写jquery的东西,感觉自己完全不会了. 话不多说,直接上code.本例子以简单的 ...
- javascript小实例,PC网页里的拖拽
几年前,我参与设计开发一个房产网的项目,我负责前端工作,由于项目经理要求比较高,参考了很多房产类网站比较优秀的功能,想把别人比较优秀的设计和想法集合到一起,那时的设计稿和功能实现,简直就是改了又改,今 ...
- javascript小实例,PC网页里的拖拽(转)
这是现在的效果,可能改了一些,原来的效果是,里面的这张图是可以上下左右拖动的,然后房子上面的显示的楼栋号,也跟着图片一起移动,当时js能力还不行,未能实现项目经理的要求,不过后来项目经理又把这个效果推 ...
- 拖拽系列一、JavaScript实现简单的拖拽效果
前端拖拽相关应用汇总 在现实生活中就像男孩子牵着(拖着)女朋友的手穿过马路:从马路的一端走到另一端这种场景很常见: 而在前端开发中拖拽效果也算是前端开发中应用最常见.最普遍的特效:其拖拽涉及知 ...
- Javascript实现鼠标框选元素后拖拽被框选的元素
之前需要做一个框选元素后拖拽被框选中的元素功能,在网上找资料做了一些修改,基本达到了需要的效果,希望对也需要实现框选后拖拽元素功能的人有用. 页面加载后效果 框选后的内容可以拖拽,如下图: 代码下载
- 学习笔记---Javascript事件Event、IE浏览器下的拖拽效果
学习笔记---Javascript事件Event.IE浏览器下的拖拽效果 1. 关于event常用属性有returnValue(是否允许事件处理继续进行, false为停止继续操作).srcE ...
随机推荐
- [python][django学习篇][3]创建django web的数据库模型
推荐学习博客:http://pythonzh.cn/post/8/ 博客或者web界面向用户展示内容,它需要从某个地方获取博客内容或者web界面内容,才能够展示出来.通常来说:某个地方指的就是数据库 ...
- python 打印9*9乘法表
# -*- coding: utf8 -*- # Author:wxq 1. for i in range(1,10): for j in range(1,i+1): print "%d*% ...
- 使用jsp读取TXT格式文件
<%@page import="java.io.BufferedReader"%> <%@page import="java.io.FileReader ...
- java如何建项目
java常开发的项目有哪几种? 这几种项目都是怎么建的?
- 【bzoj2127】happiness 网络流最小割
题目描述 高一一班的座位表是个n*m的矩阵,经过一个学期的相处,每个同学和前后左右相邻的同学互相成为了好朋友.这学期要分文理科了,每个同学对于选择文科与理科有着自己的喜悦值,而一对好朋友如果能同时选文 ...
- WS-*协议栈及相关概念
1. 什么是WS-Security? WS-Security 是一个 SOAP 的扩展,它提供了对 SOAP 消息的认证和加密. 在介绍 WS-Security 之前,我们有必要了解一下 WS-Sec ...
- [TC_SRM_460]TheCitiesAndRoadsDivOne
[TC_SRM_460]TheCitiesAndRoadsDivOne 试题描述 John and Brus have become very famous people all over the w ...
- wewe
<#assign base=rc.contextPath /> <#import "spring.ftl" as s /> <!DOCTYPE htm ...
- caffe+Ubuntu14.04.10 +cuda7.0/7.5+CuDNNv4 安装
特别说明: Caffe 官网地址:http://caffe.berkeleyvision.org/ 本文为作者亲自实验完成,但仅限用于学术交流使用,使用本指南造成的任何不良后果由使用者自行承担,与本文 ...
- codeforces 757F - 最短路DAG+灭绝树
Description 给定一个n个点,m条边的带权无向图,和起点S.请你选择一个点u(u!=S),使得在图中删掉点u 后,有尽可能多的点到S的最短距离改变. Solution 先建出最短路DAG,在 ...