07月07, 2016

js记录之拖放

记得一开始学js的时候,最学不进去,和最讨厌学的就是这种拖放啊、轮播啊类似的动画。无奈,因为工作需要,我们有时候还是需要学,起码会改别人的js代码。因为往往别人的代码,并不符合自己的业务逻辑代码,总会多些“另类”的东西出来。

前几天做angularjs项目时,就碰到了这样的需求。于是乎,github找了一下,发现有一个dom-drag

基本符合需求,但可能会有以下问题:

1.绝对定位的元素left、top必须写在style里面

2.当界面缩放时,它并没有提供update方法,来改变边界的大小位置

3.一些事件。比如说drag start,drag end要处理一些事,未开放出来。

我们都知道,在drag标准(HTML5)未出来之前,我们的拖拽代码,都是这样写的:

 dragEl.addEventListener("mousedown", function(e){
            document.addEventListener("mousemove", function(e){
            }, false);
            document.addEventListener("mouseup", function(e){
            }, false);
 });

里面就操作一些坐标点的位置即可。

这样写,确实是OK的。但是遇到一个场景,就坑了:

一个元素既有拖拽事件,又有点击事件。

我们必须要做一个控制,比如说当drag move的时候,是不能被点击的,只有当drag over的时候,才能被点击。

H5的时代

出现了一个drag的tag属性,而它没有了上述的烦恼,简单代码如下:

    <div id="root" style="left:20px; top:20px;">
        <div id="handle" draggable="true">Handle</div>
    </div>
    <script>
        var root = document.getElementById("root"),
            handle = document.getElementById("handle");
        handle.addEventListener("dragstart", function(e){
            console.log("1111");
            document.addEventListener("dragover", function(e){
                console.log("2222");
            }, false);
            document.addEventListener("drop", function(e){

            }, false);
        });

        handle.addEventListener("click", function(){
            alert("点我啊。。。");
        })

    </script>

至于拖拽的具体实现,可以参考:HTML5魔法堂:全面理解Drag & Drop API - ^_^肥仔John - 博客园

本文链接:www.my-fe.pub/post/js-record-drag.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。