Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <style>
- #mydiv {
- position: absolute;
- z-index: 9;
- background-color: #f1f1f1;
- text-align: center;
- border: 1px solid #d3d3d3;
- }
- #mydivheader {
- padding: 10px;
- cursor: move;
- z-index: 10;
- background-color: #2196F3;
- color: #fff;
- }
- </style>
- <body>
- <h1>Draggable DIV Element</h1>
- <p>Click and hold the mouse button down while moving the DIV element</p>
- <div id="mydiv">
- <div id="mydivheader">Click here to move</div>
- <div id="main"></div>
- </div>
- <script>
- //Make the DIV element draggagle:
- dragElement(document.getElementById("mydiv"));
- 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) {
- 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;
- }
- }
- var div = document.createElement("div");
- div.style.width = "100px";
- div.style.height = "100px";
- div.style.background = "red";
- div.style.color = "white";
- div.innerHTML = "Hello";
- document.getElementById("main").appendChild(div);
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement