Responsive Drag w Retina

Draggable Elements

by TheFiddler

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css">
<script src="http://jsplumb.org/js/1.3.4/jquery.jsPlumb-1.3.4-all.js"></script>
<div>
    <div id="boundbox">
        <div id="DragCircle"></div>
    </div>
</div>

CSS

#DragCircle {
    width: 40px;
    height: 40px;
    background-color: red;
    border: 2px solid black;
    border-radius: 40px;
    cursor: pointer;
    position: relative;
    top: 160px;
    left: 160px;
}
#boundbox {
    border: 1px dashed black;
    width: 600px;
    height: 600px;
    background-color: #eee;
    margin: 0 auto;
}
@media only screen and (min-width : 320px) {
    #DragCircle {
        width: 20px;
        height: 20px;
        border-radius: 20px;
    }
    #boundbox {
        width:300px;
        height:300px;
        background-color: #ccc;
    }
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    #DragCircle {
        width: 80px;
        height: 80px;
        border-radius: 80px;
    }
    #boundbox {
        width:1200px;
        height:1200px;
        background-color: #999;
    }
}

JavaScript

function setPositions(xarg, yarg) {

    //get boundbox width
    var relativeDiameter = $('#boundbox').width();
    
    //convert to percentage   
    var percentagewidth = xarg/relativeDiameter;
    var percentageheight = yarg/relativeDiameter;
    alert(relativeDiameter + " " + xarg + " " + yarg + " " + percentagewidth + "%");

    //persist to DB...
}

$(document).ready(function () {
    $("#DragCircle").draggable({
        containment: "#boundbox",
        drag: function (e, ui) {

        },
        stop: function (e, ui) {
            var x = ui.position.left;
            var y = ui.position.top;
            setPositions(x, y);
        }
    });

});