gistfile1.js

;(function(){


  function createTransitionObject(transition) {
    var obj = {
      "-webkit-transition": transition,
      "MozTransition": transition,
      "OTransition": transition,
      "transition": transition
    }
    if(transition === "") obj.OTransitionDuration = "0s"
    return obj
  }

  function makeDraggable(reverse){

    var element = this
      , morph, top, left, stopTransition

      element.css({
        position: "absolute",
        cursor: "move",
        top: element.offsetTop,
        left: element.offsetLeft
      })

      element.listen("click", Event.stop).listen("mousedown", function (e) {

        var scrollWidth = element.scrollWidth / 2,
            scrollHeight = element.scrollHeight / 2

        top = +element.style.top.replace("px", "")
        left = +element.style.left.replace("px", "")

        Event.stop(e)

        Event.listen(window, "mousemove", (morph = function (e) {

          element.css({
            top: e.clientY - scrollHeight,
            left: e.clientX - scrollWidth,
            margin: 0,
            padding: 0
          });


          Event.listen(window, "mouseup", function () {
            Event.stopListening(window, "mousemove", morph)

            if(reverse) {
              element.css(Object.extend({
                "top": top,
                "left": left
              }, createTransitionObject(".3s linear all")))
                .listen("otransitionend oTransitionEnd webkitTransitionEnd transitionend", (stopTransition = function () {

                element.css(createTransitionObject("")).stopListening("otransitionend oTransitionEnd webkitTransitionEnd transitionend", stopTransition)

              }))
            }

          })
        }))
    })

  }

  Element.extend({
    makeDraggable : makeDraggable
  })

})()

  Element.ready(function(){

    $(myElement).makeDraggable(true)

  })