CODEWITHSUNDEEP
jqueryjquery-uimouseeventdraggable
meridius
meridius

Reputation: 1587

drag to create jQuery UI draggable and move with mouse until released

After I drag some html element I need it to duplicate itself, change some things, become jQuery UI draggable and move along with mouse cursor until I release the mouse.

So far I managed to clone, alter and do draggable (see http://jsfiddle.net/meridius/qdVue) I can't make it to move with cursor no matter what I do.

Help is appreciated.

Upvotes: 0

Views: 1402

Answers (1)

Nunners
Nunners

Reputation: 3047

What you need to do is set a global variable to be the current object and monitor the MouseMove event of the element (or document) and set the left/top position of the element to be that of the mouse.

var currentObj = null;

$(".js-factory")
    .on("mousedown", ".js-form .js-base", function (event) {
        var figurka = $(this).clone(false).addClass("figurka").draggable({
            snapMode:   "inner",
            snapTolerance   :   55
        }).wrapInner("<div class='fig-wrap'></div>");
        $(".js-park").append(figurka);
        currentObj = figurka;
    });
$(document).mousemove(function(e) {
    if (currentObj) {
        currentObj.css({'top':e.clientY - 20, 'left':e.clientX - 20});
    }
});
$(document).on('mouseup', function() {
    currentObj = null;
});

In the previous code we set the value of currentObj to be that of the figurka object ou create, we then monitor the mousemove event of the document and the created object is moved to the position of the mouse -20. Once the mouseup event occurs on the document we reset the currentObj to be null.

Example JSFiddle

EDIT

There seems to be an odd occurrence in my Fiddle as to why the position of the element is not at the mouse. This is being caused by the float:right; CSS property for your base element.

Upvotes: 2

Related Questions