文档章节

[转]拖动

rhythmk
 rhythmk
发布于 2014/08/16 16:36
字数 248
阅读 6
收藏 0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
 .dom-one{ position:absolute;width:200px; height:100px; background:#D8F5F2;filter:alpha(opacity=100); border:2px solid #0CC;}
</style>


</head>

<body>
<div id="dom" class="dom-one">
 <div id="dom2" style="height:30px; background:#CCC; cursor:move">拖动灰色的DIV移动</div>
</div>
<br/><br/><br/><br/><br/><br/><br><br><br><br><br><br>

<div style="width:300px; height:200px; border:1px solid #CCC;"></div>

<script type="text/javascript">
 function move(matter,id){
   //受影响对象//移动对象
   var $=function(o){return document.getElementById(o);}
   
 
   var alpha=function(ob,val){if (document.all){
   ob.filters.alpha.opacity=val;
   }else{
   ob.style.opacity=val/100;}}
   var loadd=function(){
     var o=$(matter);
     var c=$(id);
     o.onmousedown=function(ev){
      var mxy=mouseMove(ev);
      var by={x:mxy.x-(c.offsetLeft),y:mxy.y-(c.offsetTop)};
      alpha(c,50);
      o.style.cursor="move";
      document.onmousemove=function(ev){
       var mxy=mouseMove(ev);
       c.style.left=mxy.x-by.x+"px";
       c.style.top=mxy.y-by.y+"px";
      };
      document.onmouseup=function(){
        alpha(c,100);
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        this.onmousemove=null;
       }
     }
    }
    loadd();
  
  function mouseMove(e){
   e = e || window.event;
   var m=(e.pageX || e.pageY)?{ x:e.pageX, y:e.pageY } : { x:e.clientX + document.body.scrollLeft - document.body.clientLeft, y:e.clientY + document.body.scrollTop  - document.body.clientTop };
     return m;
  }
}
 move("dom2","dom")
 
 
 window.onload=function(){
 
     var  m={x:"wangkun",y:"rhythmk"};
     var v=m.x;
     alert(v);
    
 }
</script>
</body>
</html>

© 著作权归作者所有

上一篇: 2.WCF 同步 异步
下一篇: mysql 笔记
rhythmk
粉丝 1
博文 62
码字总数 40987
作品 0
广州
私信 提问
玩转iOS开发:iOS 11 新特性《高级拖放》

文章分享至我的个人技术博客: https://cainrun.github.io/15130820516379.html 在这之前, 我们已经知道了的拖拽功能, 也试过在单个视图里拖拽和跨视图的拖拽, 但好像和我们在看里的不太一样,...

CainLuo
2017/12/13
0
0
从零学习Fluter(五):Flutter中手势滑动拖动已经网络请求

从六号开始搞Flutter,到今天写这篇blog已经过了4天时间,文档初步浏览了一遍,写下了这个demo。demo源码分享在github上,现在对flutter有种说不出的喜欢了。大家一起搞吧! 废话不多说,开始...

topbrids
2018/12/09
0
0
公式编辑,拖拽后如何保持变量不变--$

Excel在单元格横向或纵向拖动的时候,会对数字基于前一单元格自动 +1 即使该单元格是函数,函数里的参数也是同样的情况。 问题:是否能指定其中一个函数自动 +1而其它参数值保持原来的样子呢...

老朱教授
2017/11/14
0
0
怎么用几何画板绘制三棱锥

大家都知道,三棱锥是几何体,属于锥体的一种,由四个三角形组成,亦称为四面体。三棱锥有六条棱长,四个顶点,四个面。那么几何画板作为专业的几何绘图工具,如何才能画出这样的三棱锥呢?本...

学术研究软件
2016/12/07
29
0
混搭的图形在中国地图上显示专题图的问题

@Kener-林峰 你好,想跟你请教个问题:大神,你好,还是关于专题图的问题,在具体实现的过程有一些问题向你请教 第一个问题:专题图和地图的层叠是如何控制的,我的地图总是显示在专题图的上...

gggoodgame
2014/04/23
898
3

没有更多内容

加载失败,请刷新页面

加载更多

nginx学习笔记

中间件位于客户机/ 服务器的操作系统之上,管理计算机资源和网络通讯。 是连接两个独立应用程序或独立系统的软件。 web请求通过中间件可以直接调用操作系统,也可以经过中间件把请求分发到多...

码农实战
今天
5
0
Spring Security 实战干货:玩转自定义登录

1. 前言 前面的关于 Spring Security 相关的文章只是一个预热。为了接下来更好的实战,如果你错过了请从 Spring Security 实战系列 开始。安全访问的第一步就是认证(Authentication),认证...

码农小胖哥
今天
10
0
JAVA 实现雪花算法生成唯一订单号工具类

import lombok.SneakyThrows;import lombok.extern.slf4j.Slf4j;import java.util.Calendar;/** * Default distributed primary key generator. * * <p> * Use snowflake......

huangkejie
昨天
12
0
PhotoShop 色调:RGB/CMYK 颜色模式

一·、 RGB : 三原色:红绿蓝 1.通道:通道中的红绿蓝通道分别对应的是红绿蓝三种原色(RGB)的显示范围 1.差值模式能模拟三种原色叠加之后的效果 2.添加-颜色曲线:调整图像RGB颜色----R色增强...

东方墨天
昨天
11
1
将博客搬至CSDN

将博客搬至CSDN

算法与编程之美
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部