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/ ...
随机推荐
- TopK的一个简单实现
转自:http://rangerwolf.iteye.com/blog/2119096 题外话: <Hadoop in Action> 是一本非常不错的交Hadoop的入门书,而且建议看英 ...
- ajax传值给php
test.php <script type="text/javascript"> function selectInput(oSelect) { var value= ...
- 用cxf生成webservice的java客户端代码
百度来的: 最近,由于要用到某公司提供的webservice实现的api接口,想到了用cxf的wsdl2java工具来生成客户端程序.(自己写是比较麻烦且费时,so偷懒一下..) 使用步骤如下: 一. ...
- C++多线程环境下注意共享资源的释放顺序
比如我现在写一个多线程下载程序,包含DownloadTask.HttpDownload两个类. class DownloadTask { //省略n行代码 public: int m_threads; ...
- Unity3D-光照贴图技术
概念 Lightmapping光照贴图技术是一种增强静态场景光照效果的技术,其优点是可以通过较少的性能消耗使静态场景看上去更加真实,丰富,更加具有立体感:缺点是不能用来实时地处理动态光照.当游戏场景包 ...
- CSS导入使用及引用的两种方法
方法一<link rel="stylesheet" type="text/css" href="test.css"> 方法二&l ...
- optimization blocks (csapp chapter 5.1)
p_511 编译器在没有指示下,会做‘ safe optimization',因此有些优化在没有参数的指示下是不会对代码做优化的,故在程序中应该避免某一类代码,因为它们妨碍了编译器做优化. optim ...
- 抽象工厂模式(abstract factory pattern)------创造型模式
创建型模式:抽象工厂模式 引入概念: 1.产品等级结构:当抽象的产品由具体的工厂生产出不同的产品时,这些归属与同一类的抽象产品就构成了产品等级结构: 2.产品族:具体的工厂可以生产出来的不同产品就构成 ...
- 设置同样字体大小，chrome浏览器有时字体偏大的解决办法（转）
本文是找了在网上搜了好久才找到非常棒的一篇文章,很好的解决了这个问题. 原文地址:https://github.com/amfe/article/issues/10 这个特性被称做「Text Auto ...
- mysql中什么是逻辑备份
需求描述: mysql中,或者说关系型数据库中逻辑备份到底指的是什么呢,主要还是对于 概念的理解,在此记录下. 概念解释: 逻辑备份:主要指的是保存数据库的逻辑结构(比如:create dattaba ...