jQuery UI: Draggable

Draggable Elements

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/overcast/jquery-ui.css">

<span draggable="true" id="foo" class="btn btn-primary">Foo</span>
<div style="background:red" contenteditable="true" >Put foo between this and this</div>
<a  id="foo2" class="btn btn-primary">Foo2</a>

CSS

/*
    Add custom styling or use existing jQuery UI themes

    REFERENCE: jQuery UI themes, http://blog.jqueryui.com/
*/

JavaScript

//$( "#foo2" ).draggable();
$( "#foo2" ).draggable({
      start: function(ui) {

				  event.preventDefault();
      },
      drag: function(ui) {

      },
      stop: function(ui) {

      }
    });


var btn = document.getElementById("foo");
btn.onclick = function(event) {
  event.preventDefault();
};

btn.ondragstart = function(event) {
  event.dataTransfer.setData("text/plain", "[%" + event.srcElement.innerHTML + "%]");
};