JS实现拖拽效果
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>拖拽效果</title>
<style>
#div1 {width:200px; height:200px; background:blue; position:absolute;}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');
oDiv.onmousedown=function (ev)
{
var oEvent=ev||event;
var disX=oEvent.clientX-oDiv.offsetLeft;
var disY=oEvent.clientY-oDiv.offsetTop;
document.onmousemove=function (ev)
{
var oEvent=ev||event;
oDiv.style.left=oEvent.clientX-disX+'px';
oDiv.style.top=oEvent.clientY-disY+'px';
};
document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;
};
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
JS实现拖拽效果的更多相关文章
- js 鼠标拖拽效果实现
效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- 原生js实现拖拽效果
面向对象 + 原生js拖拽 拖拽div等盒子模型,都是日常操作没有什么问题,如果是拖拽图片的话,会有一点小坑要踩...... 那么我们看代码: var Move_fn = {}; (function( ...
- 【转】JS容器拖拽效果，并通过cookie保存拖拽各容器的所在位置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS移动客户端--触屏滑动事件及js手机拖拽效果
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...
- js基础拖拽效果
function drag(ele) { const config = { mark: 0, x: 0, y: 0, left: ele.offsetLeft, top: ele.offsetTop, ...
- JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
转自<JS实现漂亮的窗口拖拽效果(可改变大小.最大化.最小化.关闭)>:http://www.jb51.net/article/73157.htm 这篇文章主要介绍了JS实现漂亮的窗口 ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- js拖拽效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js div浮动层拖拽效果代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 丰富您设计的10个CSS3效果库
Magic CSS3 Animations Magic CSS3 Animations是一个CSS3动画包,拥有一些特效可以你的Web项目中免费使用.拥有像金光闪闪,角度,旋转,炸弹等特殊效果.使用简 ...
- MySQL 常用语法 之 UNION与UNION ALL
下面讲一下mySql中的union和union all 的功能以及区别 A union B 是将表A的数据和表B的数据连接成一张表,前提是查询的两张表的列数一定要一样否则出错. A union all ...
- 下列没有直接采用XML技术的是（ ）
A. UDDI B. SOAP C. AJAX D.DCOM 解答:D DCOM(分布式组件对象模型,分布式组件对象模式)是一系列微软的概念和程序接口,利用这个接口,客户端程序对象能够请求来自网络中另 ...
- （转）c++多态实现的机制
原文地址:http://blog.csdn.net/zyq0335/article/details/7657465 1 什么是多态?多态性可以简单的概括为“1个接口,多种方法”,在程序运行的过程中才决 ...
- SimplifiedHibernate：简化了的Hibernate
我的目的是实现下Hibernate中增删改查.缓存的核心功能.虽然基本功能实现了,但可能还有好多Bug,欢迎点评拍砖,没准能在一片谩骂声中取得意想不到的进步,:) // DatabaseAccess. ...
- R语言低级绘图函数-text
text函数用来在一张图表上添加文字,只需要指定对应的x和y坐标,以及需要添加的文字内容就可以了 基本用法: plot(1:5, 1:5, xlim = c(0,6), ylim = c (0,6), ...
- 终于AC了“最短路径”
今天做了一道关于最短路径的算法题,虽然最后AC了,但是我写的第一个算法,我认为是没有问题的,自己编写的测试用例也全部通过,反复调试了,都没有错误.可是在OJ上一提交就提示Wrong Answer,真是 ...
- c++ time_t
type struct tm <ctime> Time structure Structure containing a calendar date and time broken dow ...
- Apache Commons工具集简介
- CentOS7.1 Liberty云平台之Dashboard篇(7)
控制节点: 一.安装及配置Dashboard 1.安装dashboard相关包 yum install openstack-dashboard 2.配置/etc/openstack-dashboard ...