January 2014 – rootbox.co.kr

[js/jQuery] Draggable object

Posted on: January 13, 2014 | By: Kiwoong Jang – 2 Comments

오브젝트를 드래그&드랍할 수 있도록 하는 javascript(jQuery) 코드입니다. 여기에 쿠키나 로컬 스토리지등을 활용해서 widget 형태로 꾸밀 수 있을 것 같습니다. 우선은 간단하게 구현했습니다. javascript (needs jQuery)

$.fn.draggable = function() {
    return $.each(this, function() {
        var $el = $(this);
        var move = function(e) {
            if(!$el.data("_isMove")) return;

            var pos = $el.data("pos"),
                pos = { x: parseInt($el.css("left")) + (e.clientX - pos.x),
                        y: parseInt($el.css("top")) + (e.clientY - pos.y) };

            $el.css({ top: pos.y, left: pos.x });
            $el.data("pos", { x: e.clientX, y: e.clientY });
        };
        $el.on("mousedown", function(e) {
            var $this = $(this);

            $el.data("_isMove", true);
            $el.data("pos", { x: e.clientX, y: e.clientY });
        });
        $el.on("mouseup mouseout", function(e) {
            $el.data("_isMove", false);
        });
        $el.mousemove(move);
    });
};

$("#object1, #object2, #object3").draggable();

$.fn.draggable = function() {

return $.each(this, function() {

var $el = $(this);

var move = function(e) {

if(!$el.data("_isMove")) return;

var pos = $el.data("pos"),

pos = { x: parseInt($el.css("left")) + (e.clientX - pos.x),

y: parseInt($el.css("top")) + (e.clientY - pos.y) };

$el.css({ top: pos.y, left: pos.x });

$el.data("pos", { x: e.clientX, y: e.clientY });

};

$el.on("mousedown", function(e) {

var $this = $(this);

$el.data("_isMove", true);

$el.data("pos", { x: e.clientX, y: e.clientY });

});

$el.on("mouseup mouseout", function(e) {

$el.data("_isMove", false);

});

$el.mousemove(move);

});

};

$("#object1, #object2, #object3").draggable();

Here is test code that editable & testable. http://jsfiddle.net/rootbox/DwYLW/