zoukankan      html  css  js  c++  java
  • js拖拽阴影

    css如下

    #box{ width: 200px; height: 200px; position: absolute;background-color: red;}
    .border_box{  position: absolute; width: 200px; height: 200px;  opacity: 0.5; background-color: red;}

    html如下

    <div id="box"></div>

    javascript如下

    var oBox=document.getElementById('box');
    
        oBox.onmousedown=function(ev){
            var oEvent=ev || event;
    
            var disX=oEvent.clientX-oBox.offsetLeft;
            var disY=oEvent.clientY-oBox.offsetTop;
            //鼠标位置减去box位置
            
            var left=0;
            var top=0;
    
            var oBorderBox=document.createElement('div');
            oBorderBox.className="border_box";
    
            oBorderBox.style.left=oBox.offsetLeft+'px';;
            oBorderBox.style.top=oBox.offsetTop+'px';
            document.body.appendChild(oBorderBox);
    
            document.onmousemove=function(ev){ //oBox改成document是怕速度拖拽速度快,鼠标偏离了box
                var oEvent=ev || event;
                
                left = oEvent.clientX - disX;
                top = oEvent.clientY - disY;
    
                oBorderBox.style.left=left+'px';
                oBorderBox.style.top=top+'px';
    
            }
    
            document.onmouseup=function(){ //oBox改成document是防止鼠标拖拽出可视区发生不了oBox.onmouseup事件
            
                if( !collision( oBorderBox,oBox ) ){
                    oBox.style.left = left + "px";    
                    oBox.style.top = top + "px";
                }
                
                document.onmousemove=null;
                document.onmouseup=null;
    
                document.body.removeChild(oBorderBox);
            }
    
            return false; //解决FF再次拖拽出现两个oBox的bug
        }
        
        
            /*
                obj1:拖拽的元素
                obj2:被碰撞的元素
            */
            function collision(obj1,obj2){
    
                var obj1L = obj1.offsetLeft;
                var obj1LW = obj1L + obj1.offsetWidth;
                var obj1T = obj1.offsetTop;
                var obj1TH = obj1T + obj1.offsetHeight;
    
                var obj2L = obj2.offsetLeft;
                var obj2LW = obj2L + obj2.offsetWidth;
                var obj2T = obj2.offsetTop;
                var obj2TH = obj2T + obj2.offsetHeight;
    
                if( obj1LW < obj2L || obj1L > obj2LW || obj1TH < obj2T || obj1T > obj2TH){
                    return false;
                }
    
                return true;
            }
  • 相关阅读:
    DVWA系列のSQL注射
    DVWA系列のCSRF&文件包含
    PHPSTORM+Xdebug配置
    Django 从入门到忘记学习笔记
    <双十一特辑> 模拟登录学校教务处爬取全校女生资料和头像
    zzcms7.2漏洞挖掘学习
    laravel5.3搭建过程中出现问题
    kali-linux简单学习
    linux学习二(小随笔)
    linux学习一
  • 原文地址:https://www.cnblogs.com/zard23/p/9197587.html
Copyright © 2011-2022 走看看