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%;
    width: 400px;
    height: 400px;
    border: 1px solid red;
    min-width: 100px;
    min-height: 100px;
}
.mod .hd {
    width: 100%;
    height: 30px;
    background: grey;
    cursor: all-scroll;
}
.mod .corner {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 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;
    width: 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