JavaScript实现网页元素的拖拽效果

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

实现该效果的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实现网页元素的拖拽效果相关推荐

html js点击字图片下拉,JavaScript实现文字与图片拖拽效果的方法
本文实例讲述了JavaScript实现文字与图片拖拽效果的方法.分享给大家供大家参考.具体实现方法如下: JavaScript实现文字与图片的拖拽效果 *{padding:0;margin:0;} . ...
javascript小实例，PC网页里的拖拽（转）
这是现在的效果,可能改了一些,原来的效果是,里面的这张图是可以上下左右拖动的,然后房子上面的显示的楼栋号,也跟着图片一起移动,当时js能力还不行,未能实现项目经理的要求,不过后来项目经理又把这个效果推 ...
JavaScript实现鼠标拖拽效果
JavaScript实现鼠标拖拽效果前几篇博客一直在讲鼠标的移动事件相关的效果,今天再来讲一讲如何利用鼠标事件实现拖拽div块移动的效果.效果如图: HTML代码: <div id=" ...
实现元素拖拽放大缩小_Vue实战067：DOM元素拖拽效果的实现
DOM元素拖拽效果: 当鼠标选中目标元素之后可以将其拖放至指定区域的任意位置,实现的思路主要是通过鼠标事件按下.移动.抬起,摁下鼠标时记录鼠标位置以及元素位置并算出鼠标相对元素的位置,在拖拽时记下当前 ...
Javascript实现拖拽效果
我们执行拖拽操作时, 1.按住某元素 2.移动鼠标 3.移动鼠标到相应位置后松开鼠标基于以上操作,页面拖拽效果需要三个事件 onmousedown onmousemove onmouseup 在on ...
Android之实现RecyclerView拖拽效果和固定部分元素不进行交换位置(包含源代码下载地址)
1.效果爆照启动的效果拖动过程中的效果拖动后的效果 2.需求和问题需求:RecyclerView实现拖拽效果,但是部分固定位置不能进行拖拽也不能在拖拽的过程中交换顺序
盒子拖拽效果，原生js实现
原生js实现拖拽效果 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
DOM 案例——(美团外卖下拉框菜单、半透明——信息滑入、模态窗口拖拽效果、放大镜效果、滚动条滑到一定位置的固定导航栏、12306购票网站多级联动、斗鱼TV无规则弹幕特效、百度搜索条动态输入下拉瀑布)
目录 1.缓动动画--美团外卖下拉框菜单 2.半透明--信息滑入 3.模态窗口拖拽效果 4.放大镜效果 5.滚动条滑到一定位置的固定导航栏 6.12306购票网站多级联动 7.斗鱼TV无规则弹幕特效 ...
【墙裂推荐】【原生基础版】js原生实现拖拽效果，注意不要忘了div的cursor用grab和grabbing 还是古法炮制、传统工艺的原生代码兼容性最好，推荐
以下方式的劣势就是在放弃拖拽那一刻会触发click事件,通常如果被拖拽元素还有其他点击事件,会重复触发,往往并非业务需求.优势就是-额-貌似这段代码没什么屌优势! <div class='dra ...

JavaScript实现网页元素的拖拽效果

JavaScript实现网页元素的拖拽效果相关推荐

最新文章

热门文章