Guest User

draggable thing I guess

a guest
May 1st, 2023
248
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.85 KB | None | 0 0
  1. <style>
  2. #beeby {
  3. border: 1px solid black;
  4. height: 200px;
  5. width: 200px;
  6. padding: 5px;
  7. position: absolute;
  8. }
  9. #beebyheader {
  10. position: absolute;
  11. top: -6px;
  12. right: -6px;
  13. z-index: 999;
  14. }
  15. #beebyheader:hover {
  16. cursor:move;
  17. }
  18. </style>
  19. <div id="beeby">You done it
  20. <div id="beebyheader"><img src='https://cdn.discordapp.com/attachments/887921355947933726/937783420887650354/hy.png'></div>
  21. </div>
  22. <script>
  23. //Make the DIV element draggagle:
  24. dragElement(document.getElementById("beeby"));
  25.  
  26. function dragElement(elmnt) {
  27. var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  28. if (document.getElementById(elmnt.id + "header")) {
  29.  
  30. /* if present, the header is where you move the DIV from:*/
  31. document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  32. } else {
  33. /* otherwise, move the DIV from anywhere inside the DIV:*/
  34. elmnt.onmousedown = dragMouseDown;
  35. }
  36.  
  37. function dragMouseDown(e) {
  38. if(e.target != document.querySelector('#fruitlan')){
  39. e = e || window.event;
  40. e.preventDefault();
  41. // get the mouse cursor position at startup:
  42. pos3 = e.clientX;
  43. pos4 = e.clientY;
  44. document.onmouseup = closeDragElement;
  45. // call a function whenever the cursor moves:
  46. document.onmousemove = elementDrag;
  47. }
  48. }
  49.  
  50. function elementDrag(e) {
  51. e = e || window.event;
  52. e.preventDefault();
  53. // calculate the new cursor position:
  54. pos1 = pos3 - e.clientX;
  55. pos2 = pos4 - e.clientY;
  56. pos3 = e.clientX;
  57. pos4 = e.clientY;
  58. // set the element's new position:
  59. elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
  60. elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  61. }
  62.  
  63. function closeDragElement() {
  64. /* stop moving when mouse button is released:*/
  65. document.onmouseup = null;
  66. document.onmousemove = null;
  67. }
  68. }
  69. </script>
Add Comment
Please, Sign In to add comment