zoukankan      html  css  js  c++  java
  • 拖拽函数封装,元素碰撞

    function drag(obj){

    obj.onmousedown = function(ev){
    var ev = ev || event;
    //鼠标点击位置到图片两侧距离
    var ol = ev.clientX - this.offsetLeft;
    var ot = ev.clientY - this.offsetTop;

    //非标准ie下利用全局捕获占用接下来的事件,相当于阻止浏览器默认行为
    if(obj.setCapture){
    obj.setCapture();
    }

    document.onmousemove = function(ev){
    var ev = ev || event;
    //移动时方块位置
    var oL = ev.clientX - ol;
    var oT = ev.clientY - ot;

    obj.style.left = oL + 'px';
    obj.style.top = oT + 'px';

    //碰撞 九宫格排除法
    var L1 = obj.offsetLeft;
    var T1 = obj.offsetTop;
    var R1 = obj.offsetLeft + obj.offsetWidth;
    var B1 = obj.offsetTop + obj.offsetHeight;
    var L2 = oDiv.offsetLeft;
    var T2 = oDiv.offsetTop;
    var R2 = oDiv.offsetLeft + obj.offsetWidth;
    var B2 = oDiv.offsetTop + obj.offsetHeight;

    if( R1<L2 || L1>R2 || B1<T2 || T1>B2 ){
    oDiv.style.background = '';
    }else{
    oDiv.style.backgroundColor = 'red';
    }


    }

    document.onmouseup = function(){
    document.onmouseup = document.onmousemove = null;
    //鼠标抬起后解除全局捕获
    if(obj.releaseCapture){
    obj.releaseCapture();
    }
    }

    //标准浏览器阻止文字、图片拖动默认行为
    return false;
    }
    }

  • 相关阅读:
    第17章 标准库特殊设施
    第16章 模板与泛型编程
    String、StringBuffer、StringBuilder的区别
    Mycat分库分表 读写分离 主从切换
    nginx的配置与使用
    kafka的使用
    zookeeper的使用
    mysql数据库优化
    mysql数据库事务详细剖析
    new Thread的弊端及Java四种线程池的使用
  • 原文地址:https://www.cnblogs.com/lw9413/p/4077871.html
Copyright © 2011-2022 走看看