文档章节

拖动

L
 LorinLuo
发布于 2015/03/09 11:29
字数 245
阅读 33
收藏 0

<!doctype html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        #fdiv{

            width: 400px;

            height: 400px;

            border: 1px solid gray;

            position: absolute;

            top: 100px;

            left: 100px;

        }

        #sdiv{

            width: 100px;

            height: 100px;

            background-color: green;

            margin: 0 auto;

            box-shadow: 1px 1px 1px 2px red inset,1px 1px 1px 2px gray;

        }

        #sdiv:hover{

            cursor: all-scroll;

        }

    </style>

</head>

<body>

<div id="fdiv">

    <div id="sdiv"></div>

</div>

    <script>

        var fdiv = document.getElementById('fdiv');

        var sdiv = document.getElementById('sdiv');

        var eventUtil = {


            addHander: function(element, type, hander){


                if(window.addEventListener){


                    element.addEventListener(type, hander, false);


                }else if(window.attachEvent){


                    element.attachEvent('on'+type, hander);


                }else{


                    element['on'+type] = hander;


                }


            },


            removeHander: function(element, type, hander){


                if(window.addEventListener){


                    element.removeEventListener(type, hander, false);


                }else if(window.attachEvent){

                    element.detachEvent('on'+type, hander);


                }else{


                    element['on'+type] = null;


                }


            },


            getEvent: function(event){


                return event?event:window.event;


            },


            getElement: function(event){


                return event.target || event.srcElement;


            },


            preventDefault: function(event){


                if(event.preventDefault){


                    event.preventDefault();


                }else{


                    event.returnValue = false;


                }


            },


            stopPropagation: function(event){


                if(event.stopPropagation){


                    event.stopPropagation();


                }else{


                    event.cancelBubble = true;


                }


            }


        };

        window.onload = drag;

        function drag(){

            var screenX = document.documentElement.clientWidth;

            var screenY = document.documentElement.clientHeight;

            console.log(screenX)

            console.log(screenY)

            eventUtil.addHander(sdiv, 'mousedown', mouseDown);

            var startX = 0, startY = 0;

            function mouseDown(){

                var oEvent = eventUtil.getEvent(event);

                startX = oEvent.clientX - fdiv.offsetLeft;

                startY = oEvent.clientY - fdiv.offsetTop;

                eventUtil.addHander(document, 'mousemove', mouseMove);

                eventUtil.addHander(document, 'mouseup', mouseUp);

            }

            function mouseUp(){

                eventUtil.removeHander(document, 'mousemove', mouseMove);

            }

            function mouseMove(){

                var oEvent = eventUtil.getEvent(event);

                var x = oEvent.clientX;

                var y = oEvent.clientY;

                console.log(x - startX)

                if(x - startX <= 0 || y - startY <= 0 || x - startX+fdiv.offsetWidth>=screenX || y - startY+fdiv.offsetHeight>=screenY){


                }else{

                    fdiv.style.top = y - startY + 'px';

                    fdiv.style.left = x - startX + 'px';

                }

            }

        }

    </script>

</body>

</html>


© 著作权归作者所有

上一篇: 前端目录结构
下一篇: 事件分类
L
粉丝 18
博文 166
码字总数 116776
作品 0
成都
程序员
私信 提问
[译]使用原生 JavaScript 实现拖放功能

原文:Drag & Drop Elements with Vanilla JavaScript and HTML, by Jess Mitchell 摄影 | mirceaianc 关于拖放功能,现在已经有不少很好的库可以使用。但你可能不知道的是,HTML 已原生提供...

zhangbao90s
09/12
0
0
探讨把一个元素从它所在的div 拖动到另一个div内的实现方法

故事背景: 接到一个新需求,要求用vue搞,主要是拖动实现布局,关键点有:单个组件拖动,一行多列里面的组件拖动, 单个组件可以拖入一行多列里, 单个组件的拖动好实现,关键是把一个组件拖...

闫亚龙
2018/11/29
0
0
基于vue做一个禅道主页拖拽效果

不bb先看效果 源码地址 bb两句 最近在做一个基于vue的后台管理项目。平时项目进度统计就在上禅道上进行。so~ 然后领导就感觉这个拖拽效果还行,能不能加到咱们项目里面。 既然领导发话,那就...

禾寸
05/27
0
0
jqgird拖拽事件

我想拖动列表的同时对拖动行的数据进行修改,编辑如下代码: $("#departmentInfoGrid").jqGrid('sortableRows', { start : function(){ //向数据库提交修改字段 }, }); var trs = $("#depar......

果果a
2016/11/17
265
0
jquery.ui.draggable中文文档jquery 自由拖拽类~study~

JQuery UI Draggable插件用来使选中的元素可以通过鼠标拖动. Draggable的元素受影响css: ui-draggable, 拖动过程中的css: ui-draggable-dragging. 如果需要的不仅仅是拖, 而是一个完整的拖放...

diydit
2013/08/12
863
0

没有更多内容

加载失败,请刷新页面

加载更多

编程作业20190210900169

1编写一个程序,提示用户输入名和姓,然后以“名,姓”的格式打印出来。 #include <stdio.h>#include <stdlib.h> int main(){ char firstName[20]; char lastName[20]; print......

1李嘉焘1
22分钟前
4
0
补码的优点及原理分析

只讨论整数 1.计算机内部为什么没有减法器? 减法运算本身其实就是加法,如x - y即x +(-y),所以只需要将负数成功表示出来并可以参加加法运算,那加法器就可同时实现“+”和“-”的运算。这...

清自以敬
37分钟前
63
0
Docker 可视化管理 portainer

官网安装指南: https://portainer.readthedocs.io/en/latest/deployment.html docker-compose.yml 位置,下载地址:https://downloads.portainer.io/docker-compose.yml...

Moks角木
今天
5
0
Spring Security 实战干货:必须掌握的一些内置 Filter

1. 前言 上一文我们使用 Spring Security 实现了各种登录聚合的场面。其中我们是通过在 UsernamePasswordAuthenticationFilter 之前一个自定义的过滤器实现的。我怎么知道自定义过滤器要加在...

码农小胖哥
今天
8
0
常见分布式事务解决方案

1 微服务的发展 微服务倡导将复杂的单体应用拆分为若干个功能简单、松耦合的服务,这样可以降低开发难度、增强扩展性、便于敏捷开发。当前被越来越多的开发者推崇,很多互联网行业巨头、开源...

asdf08442a
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部