使用原生JS实现可拖拉页面元素

还包含卡通表情包切换动画。

js, drag, smile, face

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 4173
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

(function() {
    var moveMe = document.getElementById('movable'),
        face = document.getElementById('face'),
        message = document.getElementById('message');

var diffY = undefined,
        diffX = undefined,
        elmHeight = undefined,
        elmWidth = undefined,
        containerHeight = undefined,
        containerWidth = undefined,
        outOfBoundsCounter = undefined,
        isMouseDown = false;

function resetFace() {
        if (outOfBoundsCounter < 5) {
            moveMe.classList.remove('pained', 'fainted');
            message.innerHTML = 'yay!';
        }
    }

function mouseDown(e) {
        isMouseDown = true;
        outOfBoundsCounter = 0;
        // get initial mousedown coordinated
        var mouseY = e.clientY;
        var mouseX = e.clientX;

// get element top and left positions
        var elm = moveMe;
        var elmY = elm.offsetTop;
        var elmX = elm.offsetLeft;

// get elm dimensions
        elmWidth = elm.offsetWidth;
        elmHeight = elm.offsetHeight;

// get container dimensions
        var container = elm.offsetParent;
        containerWidth = container.offsetWidth;
        containerHeight = container.offsetHeight;

// get diff from (0,0) to mousedown point
        diffY = mouseY - elmY;
        diffX = mouseX - elmX;
    }

function mouseMove(e) {
        if (!isMouseDown) return;
        var elm = moveMe;
        // get new mouse coordinates
        var newMouseY = e.clientY;
        var newMouseX = e.clientX;

// calc new top, left pos of elm
        var newElmTop = newMouseY - diffY,
            newElmLeft = newMouseX - diffX;

// calc new bottom, right pos of elm
        var newElmBottom = newElmTop + elmHeight,
            newElmRight = newElmLeft + elmWidth;

if (newElmTop < 0 || newElmLeft < 0 || newElmTop + elmHeight > containerHeight || newElmLeft + elmWidth > containerWidth) {
            // if elm is being dragged off top of the container...
            if (newElmTop < 0) {
                newElmTop = 0;
            }

// if elm is being dragged off left of the container...
            if (newElmLeft < 0) {
                newElmLeft = 0;
            }

// if elm is being dragged off bottom of the container...
            if (newElmBottom > containerHeight) {
                newElmTop = containerHeight - elmHeight;
            }

// if elm is being dragged off right of the container...
            if (newElmRight > containerWidth) {
                newElmLeft = containerWidth - elmWidth;
            }
            setOutOfBoundsFace();
        } else {
            resetFace();
        }

moveElm(elm, newElmTop, newElmLeft);
    }

// move elm
    function moveElm(elm, yPos, xPos) {
        elm.style.top = yPos + 'px';
        elm.style.left = xPos + 'px';
    }

function mouseUp() {
        isMouseDown = false;
        message.innerHTML = 'plz move me';
    }

moveMe.addEventListener('mousedown', mouseDown);
    document.addEventListener('mousemove', mouseMove);
    document.addEventListener('mouseup', mouseUp);
})();

编译

CSS

@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=PT+Mono");
body,
html,
.container {
    margin: 0;
    padding: 0;
    border: 0;
    position: relative;
    background-color: #767df9;
    width: 100%;
    height: 100%;
}
.face {
    width: 125px;
    height: 70px;
    font-size: 35px;
    line-height: 70px;
}
.face:after {
    content: '◉_◉';
    text-align: center;
}
.box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
    top: 70px;
    left: 100px;
    box-sizing: border-box;
    border: 2px solid currentColor;
    color: #000;
    background: #474ec8;
    width: 150px;
    height: 150px;
    font-family: 'PT Mono', monospace;
    font-size: 16px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: center;
}
.box:hover {
    background-color: #3f46c6;
}
.box:active,
.box:focus {
    background-color: #3339a9;
    cursor: move;
    cursor: -webkit-grab;
    cursor: grab;
}
.box:active .face:after,
.box:focus .face:after {
    content: ' ͡ ͜ ͡ ';
    position: relative;
    left: -8px;
}
.box:active.pained .face:after,
.box:focus.pained .face:after {
    content: 'ಥ﹏ಥ';
    left: 0;
}
.box:active.fainted,
.box:focus.fainted {
    background-color: rgba(255, 255, 255, 0.3);
}
.box:active.fainted .face:after,
.box:focus.fainted .face:after {
    content: 'X ~ X';
    left: 0;
}

HTML

还包含卡通表情包切换动画。

js, drag, smile, face

编辑器支持Emmet

快捷键

还包含卡通表情包切换动画。

js, drag, smile, face

使用Angular.JS实现的可拖拉积木块

使用DragulaJS实现的拖拉式文章在线编辑器

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：