akhildevelops/eyyjdwq.markdown

## eyyjdwq.markdown

      
    Raw
  

              eyyjdwq.markdown
            
          
    eYyJdWQ

A Pen by Akhil a.k.a Enforcer007 on CodePen.
License.

  
## index.html
<html>

<body onload="onload()">
    <div class="main">
        <div>
            Hello
        </div>
        <div class="centre">
            <div id="canvas">
                <div class="marker"></div>
                <div id="second">
                </div>
                <div id="first">
                </div>
                <div id="third">
                    <img class="noSelect" src="https://avatars.githubusercontent.com/u/6951100?s=40&amp;v=4" alt="@Enforcer007">
                </div>
            </div>
        </div>
    </div>
</body>

</html>

## script.js
function onload() {
    const


    class Box {
        constructor(element) {
            this.box = element;
            this.handleMouseDown = this.handleMouseDown.bind(this);
            this.handleMouseUp = this.handleMouseUp.bind(this);
            this.handleMouseMove = this.handleMouseMove.bind(this);
        }

        handleMouseDown() {
            this.box.style.cursor = "move";
            this.box.addEventListener("mouseup", this.handleMouseUp);
            canvas.addEventListener("mousemove", this.handleMouseMove);
            canvas.addEventListener("mouseout", this.handleMouseUp);
        }

        handleMouseUp() {
            this.box.style.cursor = "default";
            canvas.removeEventListener("mousemove", this.handleMouseMove);
            canvas.removeEventListener("mouseleave", this.handleMouseUp);
        }

        handleMouseMove(e) {
            const boxRect = this.box.getBoundingClientRect();
            this.box.style.top = `${this.box.offsetTop + e.movementY}px`;
            this.box.style.left = `${this.box.offsetLeft + e.movementX}px`;
        }

        init() {
            this.box.addEventListener("mousedown", this.handleMouseDown);
        }
    }
    elem = new Box(second);
    elem2 = new Box(third);
    elem2.init();
    elem.init();
    console.log(window.getComputedStyle(elem.box));
}

## scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/moveable/0.28.0/moveable.min.js"></script>

## style.css
body {
    background-color: black;
    color: wheat;
}

.centre {
    display: flex;
    justify-content: center;
}
#canvas {
    position: relative;
    border: 3px solid #734565;
    width: 50%;
    height: 300px;
    overflow: hidden;
}

#first {
    position: absolute;
    width: 100px;
    left: 10px;
    top: 10px;
    height: 200px;
    border: 1px solid #ab7854;
    background-color: blue;
}
#second {
    position: absolute;
    border: 1px solid #cd67ef;
    width: 100px;
    height: 100px;
    left: 50px;
    top: 50px;
    background-color: green;
}
#third {
    position: absolute;
    left: 200px;
    width: 200px;
}
img {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.noSelect {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.noSelect:focus {
    outline: none !important;
}
	<html>

	<body onload="onload()">
	<div class="main">
	<div>
	Hello
	</div>
	<div class="centre">
	<div id="canvas">
	<div class="marker"></div>
	<div id="second">
	</div>
	<div id="first">
	</div>
	<div id="third">
	<img class="noSelect" src="https://avatars.githubusercontent.com/u/6951100?s=40&v=4" alt="@Enforcer007">
	</div>
	</div>
	</div>
	</div>
	</body>

	</html>
	function onload() {
	const


	class Box {
	constructor(element) {
	this.box = element;
	this.handleMouseDown = this.handleMouseDown.bind(this);
	this.handleMouseUp = this.handleMouseUp.bind(this);
	this.handleMouseMove = this.handleMouseMove.bind(this);
	}

	handleMouseDown() {
	this.box.style.cursor = "move";
	this.box.addEventListener("mouseup", this.handleMouseUp);
	canvas.addEventListener("mousemove", this.handleMouseMove);
	canvas.addEventListener("mouseout", this.handleMouseUp);
	}

	handleMouseUp() {
	this.box.style.cursor = "default";
	canvas.removeEventListener("mousemove", this.handleMouseMove);
	canvas.removeEventListener("mouseleave", this.handleMouseUp);
	}

	handleMouseMove(e) {
	const boxRect = this.box.getBoundingClientRect();
	this.box.style.top = `${this.box.offsetTop + e.movementY}px`;
	this.box.style.left = `${this.box.offsetLeft + e.movementX}px`;
	}

	init() {
	this.box.addEventListener("mousedown", this.handleMouseDown);
	}
	}
	elem = new Box(second);
	elem2 = new Box(third);
	elem2.init();
	elem.init();
	console.log(window.getComputedStyle(elem.box));
	}
	body {
	background-color: black;
	color: wheat;
	}

	.centre {
	display: flex;
	justify-content: center;
	}
	#canvas {
	position: relative;
	border: 3px solid #734565;
	width: 50%;
	height: 300px;
	overflow: hidden;
	}

	#first {
	position: absolute;
	width: 100px;
	left: 10px;
	top: 10px;
	height: 200px;
	border: 1px solid #ab7854;
	background-color: blue;
	}
	#second {
	position: absolute;
	border: 1px solid #cd67ef;
	width: 100px;
	height: 100px;
	left: 50px;
	top: 50px;
	background-color: green;
	}
	#third {
	position: absolute;
	left: 200px;
	width: 200px;
	}
	img {
	position: relative;
	width: 100%;
	height: 100%;
	z-index: -1;
	}

	.noSelect {
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	}
	.noSelect:focus {
	outline: none !important;
	}