原生拖放代码

这段js代码会让页面所有position:absolute;的元素可以拖动

var chef = (function(){
        var drawDiv,ofstX,ofstY;

        function fun(event){
            var event = event || window.event;
            var target = event.target || event.srcElement;
            switch(event.type){
                case "mousedown":
                            drawDiv = target;
                            ofstX = event.clientX-drawDiv.offsetLeft;
                            ofstY = event.clientY-drawDiv.offsetTop;
                    break;
                case "mousemove":
                        if(drawDiv != null){
                            drawDiv.style.left = event.clientX - ofstX + "px";
                            drawDiv.style.top = event.clientY - ofstY + "px";
                        }
                    break;
                case "mouseup":
                    drawDiv = null;
                    break;

            }
        };

        document.body.onmousedown = function(event){fun(event);};
        document.body.onmousemove = function(event){fun(event);};
        document.body.onmouseup   = function(event){fun(event);};
    })();
时间: 2024-08-09 21:52:21

原生拖放代码的相关文章

HTML5原生拖放实例分析

原文链接:http://www.cnblogs.com/zhenwen/p/5855107.html HTML5提供了原生拖放功能的JavaScript API,使用起来很方便. 兼容性: 对于PC端浏览器,Firefox.Chrome.Safari支持良好,而IE和Edge浏览器有些特性不支持,如IE10和IE11.Edge对于dataTransfer.setData(format,data) ,只定义了"text"和"URL"两种有效的数据类型.而HTML5规范

《JAVASCRIPT高级程序设计》原生拖放和媒体元素

一.原生拖放 最早在网页中引入javascript拖放功能的是IE4,当时,网页中只有两种对象可以拖放:图像和某些文本.而现在,几乎网页中的任何元素都可以拖放以及作为放置目标.下面介绍一些与拖放相关的内容: 1.拖放事件 在拖放事件中,将依次在被拖动的元素和作为放置目标的元素上触发3个事件: 被拖动的元素:dragstart----drag----dragend 作为放置目标的元素:dragenter----dragover---dragleave(元素被拖出了目标)或drop(元素被放到了放置

深入理解javascript原生拖放

× 目录 [1]拖放源 [2]拖放目标 [3]dataTransfer对象[4]改变光标 前面的话 拖放(drag-and-drop,DnD)其实是两个动作——拖和放.所以,它涉及到两个元素.一个是被拖的元素,称为拖放源:另一个是要放的目标,称为拖放目标.本文将通过拆分这两个概念来详细介绍原生拖放 拖放源 什么样的元素才是拖放源呢? HTML5为所有HTML元素规定了一个draggable属性,表示元素是否可以拖动 图像和链接的draggable属性自动被设置成了true,而其他元素这个属性的默

不使用spring的情况下原生java代码两种方式操作mongodb数据库

由于更改了mongodb3.0数据库的密码,导致这几天storm组对数据进行处理的时候,一直在报mongodb数据库连接不上的异常.   主要原因实际上是和mongodb本身无关的,因为他们改的是配置文件的密码,而实际上这个密码在代码中根本就没有使用,他们在代码中已经把用户验证信息写死.   在协助他们解决这个问题的时候,我看到他们代码中在和mongodb数据库交互时使用了已经不被建议使用的方法,于是便抽时间尝试了一下另一种被建议的方式实现各功能.   当然了,生产环境中用的是mongodb集群

原生 JS 代码和用 jQuery 实现效果各有什么优劣势

通过自己的理解再加上自己收集的一些资料总结如下: 各種封裝,主要目的就是爲了省心,拿jq來說: JQ对不同浏览器的事件,DOM对象,都进行了封装,各种操作都可以直接兼容各种浏览器, 要知道, 不同浏览器的区别不仅仅是在CSS里写"-webkit-"还是"filter"的区别, 连事件模型这种底层的东西都不一样= = JQ特有的CSS-LIKE选择器, 链式写法, 封装的各类animate函数, 封装了的异步加载, 都大幅提高了开发效率, 减少重复劳动 JQ用dela

奇舞js笔记——第0课——如何写好原生js代码

摘要 1.好的代码职责要清晰,javscript不要用来操作样式: 2.API要设计的合理:通用性,适度的抽象(数据抽象,过程抽象),可扩展性: 3.效率问题:用好的.合适的算法(前端程序员要把自己当程序员). 注: 1.学习视频地址 2.ppt地址 3.个人感想: 是我hin厉害的师父推荐我看的月影大大的视频,感觉对于我这个小白来说,真的是一遍又一遍的刷新知识面.我觉得像月影大大这种大佬的思路,我接触之后真的是受益匪浅. 所以我总结出来不仅是自己记笔记,也是想分享给想要成为真正的前端“工程师”

RoboVM 1.1 发布,Java 转原生平台代码

分享 <关于我> 分享  [中文纪录片]互联网时代                 http://pan.baidu.com/s/1qWkJfcS 分享 <HTML开发MacOSApp教程>      http://pan.baidu.com/s/1jG1Q58M RoboVM 1.1 发布,你终于可以在 Interface Builder上使用 RoboVM 创建 UI 设计了,同时还能关联你的 Java/Scala/Kotlin. RoboVM 编译器可以将 Java 字节码翻

原生javascript代码懒加载

1.先定义需要懒加载的样式: class="lazyload" 2.设置初始透明度为0.1: .lazyload{ filter: Alpha(opacity=10); -moz-opacity:0.1; opacity:0.1; } 3.把真正需要加载的真实地址放在data-src属性中: src="懒加载图片.png" data-src="真实图片"; 4. 前端开发周大伟同学JavaScript代码编写: function lazyload

ajax简介+原生ajax代码

Ajax (Asynchronous Javascript And XML),翻译过来就是异步Javascript和XML:是一种在网页上与服务器进行交互的技术.它异步交互的特性,能够在不刷新页面的情况下,对服务器发出请求并获取数据,再利用js处理数据,显示在原网页上:实现局部刷新的效果. Ajax是通过XMLHTTPRequest这个核心对象,来完成与web服务器的交互 原生js实现Ajax:http://www.cnblogs.com/colima/p/5339227.html