js之好玩的拖拽

拖拽功能主要是用在让用户做一些自定义的动作，比如拖动排序，弹出框拖动移动等等，效果还是蛮不错的。下面讲解一下拖拽如何实现。

html样式

css样式

      #div {
        position: absolute;
        width: 0px;
        height: 0px;
        background-color: rgba(0, 0, 0, .2);
        border: 1px solid #ccc;
      }

js样式

    var downX = 0,
    downY = 0,
   // var e =window.event || e.event;
    flag = false;
window.onmousedown = function (e) {
    downX = e.clientX;
    downY = e.clientY;
    flag = true;
}

window.onmousemove = function (e) {


    if (flag) {
        var moveX = e.clientX;
        var moveY = e.clientY;
    
        // div.style.left = Math.min(moveX, downX) + 'px';
        // div.style.top = Math.min(moveY, downY) + 'px';

        // div.style.width = Math.abs(moveX - downX) + 'px';
        // div.style.height = Math.abs(moveY - downY) + 'px';

        // 如果向右
        if (moveX >= downX) {
            div.style.left = downX + 'px';
            div.style.width = moveX - downX + 'px';
        }

        // 如果向下
        if (moveY >= downY) {
            div.style.top = downY + 'px';
            div.style.height = moveY - downY + 'px';
        }


        // 向上
        if (moveY < downY) {
            div.style.top = moveY + 'px';
            div.style.height = downY - moveY + 'px';
        }

        // 如果向左
        if (moveX < downX) {
            div.style.left = moveX + 'px';
            div.style.width = downX - moveX + 'px';
        }
    }
}

window.onmouseup = function () {
    flag = false;
    div.style.cssText = '';
}

WechatIMG334.png

WechatIMG335.png

这个就是实现代码，是不是很好玩呢？有空可以试试哟