• js拖拽功能


    html
    <div class="mod" id="mod">
        <div class="hd" id="hd"></div>
        <div class="bd ">
            <div class="corner" id="corner"></div>
        </div>
    </div>
    
    css
    
    *{
        margin: 0;
        padding: 0;
    }
    .mod {
        position: absolute;
        left: 30%;
        top: 30%;
         400px;
        height: 400px;
        border: 1px solid red;
        min- 100px;
        min-height: 100px;
    }
    .mod .hd {
         100%;
        height: 30px;
        background: grey;
        cursor: all-scroll;
    }
    .mod .corner {
        position: absolute;
        right: 0;
        bottom: 0;
         20px;
        height: 20px;
        background: red;
    }
    
    js
    var mod=document.getElementById('mod');
    var hd=document.getElementById('hd');
    var corner=document.getElementById('corner');
    function addEvent(obj,type,fn){
        obj.addEventListener?obj.addEventListener(type,fn,false):attachEvent('on'+type,fn);
    }
    function page(){
        var pageWidth,pageHeight;
        if(window.innerWidth){
            pageWidth=window.innerWidth;
            pageHeight=window.innerHeight;
        }else if(document.compatMode==='CSS1Compat') {
            pageWidth=document.documentElement.clientWidth;
            pageHeight=document.documentElement.clientHeight;
        }else{
            pageWidth=document.body.clientWidth;
            pageHeight=document.body.clientHeight;
        }
        return {
            pageWidth:pageWidth,
            pageHeight:pageHeight
        }
    }
    function move(e){
        var left= e.clientX-offsetLeft,
            top= e.clientY-offsetTop;
        console.log(offsetLeft);
        var pageWidth=page().pageWidth,
            pageHeight=page().pageHeight;
        if(left<0){
            left=0;
        }else if(left>pageWidth-mod.offsetWidth){
            left=pageWidth-mod.offsetWidth
        }
        if(top<0){
            top=0;
        }else if(top>pageHeight-mod.offsetHeight){
            top=pageHeight-mod.offsetHeight;
        }
        mod.style.left=left+'px';
        mod.style.top=top+'px';
    }
    var offsetLeft,offsetTop;
    addEvent(hd,'mousedown', function (e) {
         offsetLeft= e.clientX-mod.offsetLeft;
         offsetTop= e.clientY-mod.offsetTop;
        addEvent(document, 'mousemove', move);
        addEvent(document,'mouseup', function () {
            document.removeEventListener('mousemove',move,false);
    
        })
    });
    
    var cornerLeft,
        cornerTop;
    function cornerMove(e){
        var left= e.clientX-mod.offsetLeft-cornerLeft;
        var top= e.clientY-mod.offsetTop-cornerTop;
        if(left<=80){
            left=80;
        }
        if(top<=80){
            top=80;
        }
        corner.style.left=left+'px';
        corner.style.top=top+'px';
        mod.style.width=left+20+'px';
        mod.style.height=top+20+'px';
    }
    addEvent(corner,'mousedown', function (e) {
        cornerLeft= e.clientX-corner.offsetLeft-mod.offsetLeft;
        cornerTop= e.clientY-corner.offsetTop-mod.offsetTop;
        addEvent(document,'mousemove',cornerMove);
        addEvent(document,'mouseup', function () {
            document.removeEventListener('mousemove',cornerMove,false);
        })
    });
    第二种拖拽
    
    <div class="dragable"></div>
    
    css
    *{
        margin: 0;
        padding : 0;
    }
    .dragable {
        position: absolute;
         100px;
        height: 100px;
        background: red;
    }
    js
    function Dragdrop(){
    var draging=null,
    diffX= 0,
    diffY=0;
    function handleEvent(e){
    var e=e || window.event;
    var target= e.target|| e.srcElement;
    switch (e.type){
    case "mousedown":
    if(target.className.indexOf('dragable')>-1){
    draging=target;
    diffX= e.clientX-target.offsetLeft;
    diffY= e.clientY-target.offsetTop;
    }
    break;
    case "mousemove":
    if(draging){
    var left=e.clientX-diffX,
    top= e.clientY-diffY;

    if(left < 0){
    left=0;
    }



    if(left > windowRect().winWidth-draging.offsetWidth){
    left=windowRect().winWidth-draging.offsetWidth; //ps处
    }

    if(top <= 0){
    top=0;
    }
    if(top>=windowRect().winHeight-draging.offsetHeight){
    top=windowRect().winHeight-draging.offsetHeight;
    }

    draging.style.left=left+'px';
    draging.style.top=top+'px';
    }
    break;
    case "mouseup":
    draging=null;
    break;
    }
    }
    return {
    enable: function () {
    document.addEventListener('mousedown',handleEvent,false)
    document.addEventListener('mousemove',handleEvent,false)
    document.addEventListener('mouseup',handleEvent,false)
    },
    disable: function () {
    document.removeEventListener('mousedown',handleEvent,false);
    document.removeEventListener('mousemove',handleEvent,false);
    document.removeEventListener('mouseup',handleEvent,false);
    }
    }
    }


    function addEvent(){

    }
    Dragdrop().enable();

    function windowRect(){
    var winWidth= 0,
    winHeight=0;
    /* if(window.innerHeight){
    winWidth=window.innerWidth;
    winHeight=window.innerHeight;
    }*/
    if(document.compatMode=='CSS1Compat'){
    winWidth=document.documentElement.clientWidth;
    winHeight=document.documentElement.clientHeight;
    }else{
    winWidth=document.body.clientWidth;
    winHeight=document.body.clientHeight;
    }
    return {
    winWidth:winWidth,
    winHeight:winHeight
    }
    }

    ps:target目标会在移动中从draging变为document对象,需要注意
     
    通过拖拽实现的碰撞检测
     
    
    js
    
    window.onload = function () {
        var box = document.getElementById('box');
        var ul = box.getElementsByTagName('ul')[0];
        var li = box.getElementsByTagName('li');
        var btn = document.getElementById('btn');
        var htmlArr = [];    // 存放li中的内容
    
        for (var i = 0; i < li.length; i++) {
            htmlArr[i] = li[i].innerHTML;    // 复制li中的内容
            dragCollide(li[i]);    // 给每个li添加拖拽
        }
    
        // 随机功能
        btn.onclick = function () {
            htmlArr.sort(function () {
                return Math.random() - 0.5;
            });
            for(var i = 0; i < htmlArr.length; i++){
                li[i].innerHTML = htmlArr[i];
            }
            return false;
        }
    
        // 拖拽
        function dragCollide(dragEle) {
            dragEle.onmousedown = function (ev) {
                var oEvent = ev || event;
                var isIE = !!window.ActiveXObject;
                var disX = oEvent.clientX - dragEle.offsetLeft;
                var disY = oEvent.clientY - dragEle.offsetTop;
                for (var i = 0; i < li.length; i++) {
                    li[i].style.zIndex = 1;
                };
                this.style.zIndex = '2';
    
                // 创建占位节点
                var clone = document.createElement('div');
                clone.className = 'clone';
                clone.style.left = this.offsetLeft + 'px';
                clone.style.top = this.offsetTop + 'px';
                box.appendChild(clone);
    
                // 记录初始位置
                var oldL = dragEle.offsetLeft;
                var oldT = dragEle.offsetTop;
    
                document.onmousemove = function (ev) {
                    var oEvent = ev || event;
                    dragEle.style.left = oEvent.clientX - disX + 'px';
                    dragEle.style.top = oEvent.clientY - disY + 'px';
                    var ele = getCollEle(dragEle);    // 比较最近的元素
                    if (ele) {
                        ele.style.marginTop = '-10px';
                        ele.style.marginLeft = '-10px';
                        ele.style.borderColor = 'red';
                    }
                };
    
                document.onmouseup = function () {
                    var ele = getCollEle(dragEle);
                    if (ele) {
                        dragEle.style.left = ele.style.left;
                        dragEle.style.top = ele.style.top;
                        ele.style.left = oldL + 'px';
                        ele.style.top = oldT + 'px';
                        ele.style.background = '#ccc';
                    } else {
                        dragEle.style.left = oldL + 'px';
                        dragEle.style.top = oldT + 'px';
                    }
                    box.removeChild(clone);
                    document.onmousemove = null;
                    document.onmouseup = null;
                    isIE && dragEle.releaseCapture()
                };
                isIE && dragEle.setCapture();
                return false;
            }
        }
    
        // 获取距离最近的元素
        function getCollEle(dragEle) {
            var min = 10000000;    // 参考值
            var minEle = null;
            for (var i = 0; i < li.length; i++) {    // 待优化
                var num = collide(dragEle, li[i]);
                if (num < min && num > 0) {    // > 0 表示碰撞到情况
                    min = num;
                    minEle = li[i];
                }
                li[i].style.marginTop = '';
                li[i].style.marginLeft = '';
                li[i].style.borderColor = '#ccc';
            }
            return minEle;
        }
    }
    
    // 碰撞检测,并返回中心点距离
    function collide(dragEle, testEle) {
        var dragL = dragEle.offsetLeft;
        var dragR = dragEle.offsetLeft + dragEle.offsetWidth;;
        var dragT = dragEle.offsetTop;
        var dragB = dragEle.offsetTop + dragEle.offsetHeight;
    
        var testL = testEle.offsetLeft;
        var testR = testEle.offsetLeft + dragEle.offsetWidth;;
        var testT = testEle.offsetTop;
        var testB = testEle.offsetTop + dragEle.offsetHeight;
    
        var x = Math.abs(testL + testEle.offsetWidth/2 - (dragL + dragEle.offsetWidth/2));
        var y = Math.abs(testT + testEle.offsetHeight/2 - (dragT + dragEle.offsetHeight/2));
    
        if(dragR < testL || dragB < testT || dragL > testR || dragT > testB){
            return 0;
        }else{
            return Math.sqrt(x*x + y*y);
        }
    }
    
    参考http://riny.net/lab/#javascript_drag-photo
  • 相关阅读:
    ARTS第八周打卡
    ARTS第七周打卡
    ARTS第六周打卡
    ARTS第五周打卡
    ARTS第四周打卡
    ARTS第三周打卡
    ARTS 第二周
    uniapp——头部导航栏配置
    码云、Git使用教程
    超出文本宽度点点显示——css
  • 原文地址:https://www.cnblogs.com/wz0107/p/4905647.html
Copyright © 2020-2023  润新知