Draggable Without JQuery UI

by Ken Watanabe

HTML

<div class="move001"><p>Layer 6</p></div>
<div class="move001"><p>Layer 5</p></div>
<div class="move001"><p>Layer 4</p></div>
<div class="move001"><p>Layer 3</p></div>
<div class="move001"><p>Layer 2</p></div>
<div class="move001"><p>Move001: Image Caption</h1><br/>Information Text Goes Here.</p></div>
<div class="move001"><img src="http://i60.tinypic.com/iztdzo.jpg" /></div>

CSS

body {
    padding:50px;
}
div.move001 {
    cursor:move;
    width:500px;
    height:350px;
    background-color:white;
    border:5px solid #8a0c7d;
    margin:2px;
    position: absolute;
    top: 50px;
    right: 50px;
}
.draggable {
    border:1px solid black;
}
p {
    font: normal normal 800 20px/24px helvetica;
    text-align: center;
    width: 100%;
    height: 100%;
    color: #8a0c7d;
    padding-top: 50px;
}

JavaScript

$(function () {
    $('body').on('mousedown', '.move001', function () {
        $(this).addClass('draggable').parents().on('mousemove', function (e) {
            $('.draggable').offset({
                top: e.pageY - $('.draggable').outerHeight() / 2,
                left: e.pageX - $('.draggable').outerWidth() / 2
            }).on('mouseup', function () {
                $(this).removeClass('draggable');
            });
        });
        e.preventDefault();
    }).on('mouseup', function () {
        $('.draggable').removeClass('draggable');
    });
});