How to move reposition element in a div

Question

I am trying to re position an element in a div.Basically its a span with background image.I have done the 80% part.Its working perfect when i click on it first time.It move to the desired position. But when i click on it second time it reset to its initial position.Below is my code.

I have a jsfiddle link here. https://jsfiddle.net/6q1q0wmj/

 var TransformRequestObj var TransList var DragTarget=null; var Dragging = false; var OffsetX = 0; var OffsetY = 0; jQuery(document).on('mousedown','.bx_reposioned',function(evt){ if(!Dragging) //---prevents dragging conflicts on other draggable elements--- { DragTarget = evt.target; //---bring this viewPort to top--- var xcord=evt.clientX; var ycord = evt.clientY; OffsetX= OffsetX || xcord; OffsetY= OffsetY || ycord; Dragging=true; } }); jQuery(document).on('mousemove','.bx_reposioned',function(evt){ if(Dragging) { //var pnt = DragTarget.ownerSVGElement.createSVGPoint(); var xcord=evt.clientX; var ycord = evt.clientY; xcord -= OffsetX; ycord -= OffsetY; jQuery(this).css('transform','translate('+xcord+'px, '+ycord+'px)'); } }); jQuery(document).on('mouseup','.bx_reposioned',function(evt){ Dragging = false; var xcord=evt.clientX; var ycord = evt.clientY; }); 

 .furniture-sprite { display: block; margin: 0 auto; } .bed1 { width: 45px; height: 53px; background:red; } .bed2 { width: 45px; height: 53px; background:blue; } .furniture-sprite { display: inline-block; background-repeat: no-repeat; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <span class="furniture-sprite bed1 ui-draggable ui-draggable-handle ui-draggable-dragging bx_reposioned" style="position: absolute; width: 45px; right: auto; height: 53px; bottom: auto; left: 410.953px; top: 95px;"></span> <span class="furniture-sprite bed2 ui-draggable ui-draggable-handle ui-draggable-dragging bx_reposioned" style="position: absolute; width: 45px; right: auto; height: 53px; bottom: auto; left: 410.953px; top: 95px;"></span> </div> 

Answer 1

The problem is that the mousedown handler resets OffsetX and OffsetY even if it's already set,
if you do a check before overwriting it, it seems to work fine (line 14):

        OffsetX= OffsetX || xcord;
        OffsetY= OffsetY || ycord;

https://jsfiddle.net/6q1q0wmj/1/

Answer 2

You are resetting the offset each time. Also, for the mousemove and mouseup you are filtering to only accept the events when they happens over the dragged element.

For the first problem you should keep your offset when you mousedown again and for the second problem just remove the selector filter. You will have a more fluid drag (as it will detect the drag all around the document) and also will detect the mouseup when you move out of the drag area.

Right now you won't notice the "out of the drag area" problem because you have not boundaries set, but you will notice if you add them.

If there are multiple elements, you should keep the offset saved on each element. This is a easy jQuery way of doing it:

Check this:

 var Dragging = false; jQuery(document).on('mousedown','.bx_reposioned',function(evt){ if(!Dragging) //---prevents dragging conflicts on other draggable elements--- { //---bring this viewPort to top--- var xcord = evt.clientX; var ycord = evt.clientY; !$(this).data("_dragOffset") && $(this).data("_dragOffset", { x: xcord, y: ycord }); // This will set the offset only if has no drag offset already saved Dragging = this; } }); jQuery(document).on('mousemove', function(evt){ if(Dragging) { var xcord = evt.clientX; var ycord = evt.clientY; var offset = $(Dragging).data("_dragOffset"); xcord -= offset.x; ycord -= offset.y; jQuery(Dragging).css('transform','translate('+xcord+'px, '+ycord+'px)'); } }); jQuery(document).on('mouseup', function(evt){ Dragging = false; }); 

 .furniture-sprite { display: block; margin: 0 auto; } .bed1 { background-position: 0 -117px; width: 45px; height: 53px; } .furniture-sprite { display: inline-block; background-image: url('http://www.builderux.com/demo5/wp-content/plugins/Builder_UX-combined-code/assets/img/furniture-sprite.png'); background-repeat: no-repeat; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <span class="furniture-sprite bed1 ui-draggable ui-draggable-handle ui-draggable-dragging bx_reposioned" style="position: absolute; width: 45px; right: auto; height: 53px; bottom: auto; left: 410.953px; top: 95px;"></span> </div>