Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
    <style>
        #target {
            position: absolute;
            top: 100px;
            left: 100px;
            width: 400px;
            height: 400px;
            background-color: red;
            -moz-user-select: none;
            -ms-user-select: none;
            -webkit-user-select: none;
            user-select: none;
        }
    </style>
    <script>
        window.app = {
            config: {
                canDrag: false,
                cursorOffsetX: null,
                cursorOffsetY: null
            },
            reset: function () {
                this.config.canDrag = false;
                this.config.cursorOffsetX = null;
                this.config.cursorOffsetY = null;
            },
            logicDrag: function () {
                console.log(this.config.canDrag);
                if (this.config.canDrag) {
                    this.adjustPostion(event);
                } else {
                    this.reset();
                }
            },
            start: function () {
                document.getElementById('target').addEventListener('mousedown', function (event) {
                    console.log('+++++++++++++ mousedown')
                    this.config.canDrag = true;
                    this.config.cursorOffsetX = event.offsetX;
                    this.config.cursorOffsetY = event.offsetY;
                }.bind(this));
                document.addEventListener('mousemove', function (event) {
                    console.log('+ mousemove')
                    this.logicDrag();
                }.bind(this));
                document.getElementById('target').addEventListener('mouseout', function (event) {
                    console.log('+++ mouseout')
                    this.logicDrag();
                }.bind(this));
                document.getElementById('target').addEventListener('mouseleave', function (event) {
                    console.log('+++ mouseleave');
                    this.logicDrag();
                }.bind(this));
                document.getElementById('target').addEventListener('mouseenter', function (event) {
                    console.log('+++ mouseenter');
                }.bind(this));
                document.getElementById('target').addEventListener('mouseup', function (event) {
                    console.log('+++++++++++++ mouseup')
                    this.reset();
                }.bind(this));
            },
            adjustPostion: function (event) {
                var elm = document.getElementById('target');
                elm.style.left = (event.pageX - this.config.cursorOffsetX) + 'px';
                elm.style.top = (event.pageY - this.config.cursorOffsetY) + 'px';
            }
        };
    </script>
</head>
<body onload="window.app.start();">
    <div id="target"></div>
</body>
</html>
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers