Skip to content

Instantly share code, notes, and snippets.

@rogerbraun

rogerbraun/index.html

Created February 15, 2012 15:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save rogerbraun/1836610 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save rogerbraun/1836610 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Roger Braun revised this gist Feb 15, 2012. 2 changed files with 19 additions and 0 deletions.
    11 changes: 11 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -14,18 +14,29 @@ window.onload = function() {
    // Constructing the box
    var draggable = document.createElement("div");
    var dragbar = document.createElement("h1");
    var closeable = document.createElement("span");
    var content = document.createElement("p");

    content.innerText = "Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. ";

    draggable.appendChild(closeable)
    draggable.appendChild(dragbar);
    draggable.appendChild(content);
    draggable.id = "draggable";
    dragbar.id = "dragbar";
    closeable.id = "closeable";
    dragbar.innerText = "Drag me to hell";
    closeable.innerHTML = "<a href='#'>&times;</a>";

    document.body.appendChild(draggable);


    // Make the box closeable

    closeable.onclick = function() {
    draggable.parentNode.removeChild(draggable);
    }

    // Make the box draggable

    var startMousePos = {x:0, y:0}
    8 changes: 8 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -21,3 +21,11 @@
    user-select: none;
    background: #eee;
    }

    #closeable {
    float: right;
    }

    #closeable a {
    text-decoration: none;
    }
  2. Roger Braun revised this gist Feb 15, 2012. 2 changed files with 7 additions and 1 deletion.
    1 change: 0 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,6 @@
    <html>
    <head>
    <title>Drag</title>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    </head>
    <body>
    7 changes: 7 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -4,6 +4,13 @@ window.onload = function() {

    var makeBox = function() {

    // Loading the CSS for the box

    var css = document.createElement("link");
    css.rel = "stylesheet";
    css.href = "style.css";
    document.body.appendChild(css);

    // Constructing the box
    var draggable = document.createElement("div");
    var dragbar = document.createElement("h1");
  3. rogerbraun created this gist Feb 15, 2012.
    18 changes: 18 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,18 @@
    <!DOCTYPE html>
    <html>
    <head>
    <title>Drag</title>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    </head>
    <body>
    <div id="normal">
    <h1>Drag-Test</h1>
    <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. </p>
    <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. </p>
    <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. </p>
    <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. </p>
    </div>
    <button id="makeBox">Box</button>
    </body>
    </html>
    55 changes: 55 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,55 @@
    window.onload = function() {

    var button = document.getElementById("makeBox");

    var makeBox = function() {

    // Constructing the box
    var draggable = document.createElement("div");
    var dragbar = document.createElement("h1");
    var content = document.createElement("p");

    content.innerText = "Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. ";

    draggable.appendChild(dragbar);
    draggable.appendChild(content);
    draggable.id = "draggable";
    dragbar.id = "dragbar";
    dragbar.innerText = "Drag me to hell";

    document.body.appendChild(draggable);

    // Make the box draggable

    var startMousePos = {x:0, y:0}
    var startDivPos = {x:0, y:0}
    var dragging = false;

    dragbar.onmousedown = function(event) {
    startMousePos.x = event.clientX;
    startMousePos.y = event.clientY;

    startDivPos.x = draggable.offsetLeft;
    startDivPos.y = draggable.offsetTop;

    dragging = true;
    }

    dragbar.onmousemove = function(event) {
    if(dragging){
    deltaX = event.clientX - startMousePos.x;
    deltaY = event.clientY - startMousePos.y;

    draggable.style.left = (deltaX + startDivPos.x) + "px";
    draggable.style.top = (deltaY + startDivPos.y) + "px";
    }
    }

    dragbar.onmouseup = function(event) {
    dragging = false;
    }

    }
    button.onclick = makeBox;

    }
    23 changes: 23 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,23 @@
    #draggable {
    z-index: 999;
    width: 300px;
    padding: 10px;
    border-style: dotted;
    border-width: 1px;
    background-color: #fff;
    border-radius: 5px;
    position: fixed;
    top: 50px;
    left: 300px;
    }

    #draggable h1 {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    background: #eee;
    }