Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <style>
- #beeby {
- border: 1px solid black;
- height: 200px;
- width: 200px;
- padding: 5px;
- position: absolute;
- }
- #beebyheader {
- position: absolute;
- top: -6px;
- right: -6px;
- z-index: 999;
- }
- #beebyheader:hover {
- cursor:move;
- }
- </style>
- <div id="beeby">You done it
- <div id="beebyheader"><img src='https://cdn.discordapp.com/attachments/887921355947933726/937783420887650354/hy.png'></div>
- </div>
- <script>
- //Make the DIV element draggagle:
- dragElement(document.getElementById("beeby"));
- function dragElement(elmnt) {
- var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
- if (document.getElementById(elmnt.id + "header")) {
- /* if present, the header is where you move the DIV from:*/
- document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
- } else {
- /* otherwise, move the DIV from anywhere inside the DIV:*/
- elmnt.onmousedown = dragMouseDown;
- }
- function dragMouseDown(e) {
- if(e.target != document.querySelector('#fruitlan')){
- e = e || window.event;
- e.preventDefault();
- // get the mouse cursor position at startup:
- pos3 = e.clientX;
- pos4 = e.clientY;
- document.onmouseup = closeDragElement;
- // call a function whenever the cursor moves:
- document.onmousemove = elementDrag;
- }
- }
- function elementDrag(e) {
- e = e || window.event;
- e.preventDefault();
- // calculate the new cursor position:
- pos1 = pos3 - e.clientX;
- pos2 = pos4 - e.clientY;
- pos3 = e.clientX;
- pos4 = e.clientY;
- // set the element's new position:
- elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
- elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
- }
- function closeDragElement() {
- /* stop moving when mouse button is released:*/
- document.onmouseup = null;
- document.onmousemove = null;
- }
- }
- </script>
Add Comment
Please, Sign In to add comment