小练习:元素的拖放

看到很多地方都用到了拖放,因此就自己尝试写了一个,刚开始以为很简单,结果到处都是陷阱。

不多说了,先放写好的程序,在来说说其中遇到的问题。

不过大家可以先自己写写,再来看可能效果更好。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        #drag{
            position: fixed;
            top:100px;
            left: 100px;
            width: 100px;
            height: 100px;
            background: #cdc;
        }
    </style>
</head>
<body>
    <div id="drag">
    </div>
</body>
    <script>
        var dragFn,pX,pY,sX,sY,dropFn,dragFlag=false,w=window;

        var dom=document.getElementById("drag");

        dom.addEventListener("mousedown",dragFn=function  (event) {
            dragFlag=true;
            console.log(dom.style.left+"");
            pX =  parseInt(w.getComputedStyle(dom,null)['left']); //获得初始位置
            pY = parseInt(w.getComputedStyle(dom,1)">null)['top']);
            sX=event.clientX-pX;
            sY=event.clientY-pY;  //
        });

        addEventListener('mouseup',dropFn = function(){ dragFlag = false; });设置为false,禁止拖动

        addEventListener('mousemove',mFn = (event){ onDrag(event); })

         onDrag(event) {
                if(dragFlag){ 先检验是否可以拖动

                    var l= (event.clientX -sX);
                    var t = (event.clientY -  sY);

                    var wl=window.innerWidth-dom.offsetWidth;
                    var wt=window.innerHeight-dom.offsetHeight;  页面的宽度减去dom的宽度

                    if (l<0){l=0;}
                    if (l>wl){l=wl;} 不得超出屏幕的宽度
                    if (t<0){t=0if (t>wt){t=wt;}

                        dom.style.left = l+ 'px';
                        dom.style.top = t+ 'px';
                }
            }
    </script>
</html>
View Code

 

问题1:添加事件

刚开始我把事件都添加在dom上,然后就发生了奇怪的事,即使鼠标松开了,我在移动还是会动的,

dom.addEventListener("mousedown",1)">  (event) {
......
}
dom.addEventListener('mouseup',1)">
dom.addEventListener('mousemove',1)">function(event){ onDrag(event); })

后面我再去参考别人的,发现人家都只是在鼠标按下的时候添加到dom上,而其他时候就只是绑定事件而已。

dom.addEventListener("mousedown",1)">  (event) {
......
}
addEventListener('mouseup',1)">
addEventListener('mousemove',1)">function(event){ onDrag(event); })

问题2:就是pageX,innerWidth,innerHeight,clientX,之间的区别与联系。具体参看我写的另一篇文章。

问题3:就是元素的样式获取

刚开始我采用style.left的方式获取,但是始终为零。

后面我才知道,style.left只能获取写在标签上的样式,不能获取写在css上的和style中的,如下图所示。

 

因此我就改用其他方法,总不能将样式写在标签上。

这样就可以成功获得这些样式了。

后面等我学了设计模式和jQuery之后,我在把它写成一个小的插件,

相关文章

kindeditor4.x代码高亮功能默认使用的是prettify插件,prett...
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代...
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小