jQuery UI: Draggable

Draggable Elements

by John Grivas

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/overcast/jquery-ui.css">
<div id="container">
    <div id="black_heading" align='right'>
        <div id="left" align='right'>Action: 
            <button id = 'actionsubmitbutton' onClick='addbacklog()' > Submit
            </button>
        </div>
    </div>

    <div  id="heading-3">
        <div id = 'backlog_container' class="column_41"><div id='sub_heading'>Backlog </div>
            <div id="draggable" class="dragablelement ">
                Hello
            </div>
        </div>
    </div>
</div>

CSS

* {margin: 10; padding: 10;}
#left, #middle, #right {display: inline-block; *display: inline; zoom: 1; vertical-align: middle; font-size: 12px;}
#container {width: 95%; background: #ffe6d5;}
#left {width: 32%; background: #ff5555;}
#middle {width: 32%; background: #ff5555;}
#right {width: 32%; background: #ff5555;}
#black_heading {width: 96%; background: black;}
#heading-3 { background: white;}
#sub_heading {border: 1px solid; border-radius: 10px; text-align: center; padding: 2px;}
.dragablelement { display: block; background: green;border: 1px solid; border-radius: 5px;}

.column_41 {display: inline-block; *display: inline; zoom: 1; vertical-align: middle; font-size: 12px;}
.column_41 {width: 20%; height: 200px; background: #ffaaaa; border-radius: 10px; padding: 5px;}

JavaScript

window.addbacklog = function() {
    bcklg = document.getElementById("backlog_container");
    bcklg.appendChild(getBacklogBlock());
  }
  window.getBacklogBlock = function() {
    newdiv = document.createElement('div');
    newdiv.setAttribute('class', 'dragablelement');
    $(".dragablelement").draggable({axis: "x" });
    newnode = document.createTextNode('Hello world');
    newdiv.appendChild(newnode);
    return newdiv;
  }