Can't manually change top/left of a draggable div?

Question

HTML

<div id="score">&nbsp;</div>

<div class="myDiv">1</div>
<div class="myDiv">2</div>
<div class="myDiv">3</div>

CSS

#score
{
    height:50px;
}

.myDiv
{
    width:40px;
    height:40px;
    margin:10px;
    border:1px solid #000000;
    float:left;
    cursor:pointer;
    text-align:center;
    line-height:40px;
    position:relative;
    top:0;
    left:0;
}

jQuery

$(".myDiv").draggable({
    start: function () {
        ImmagineDrag = $(this);
    },
    drag: function () {
        currentImageX = ImmagineDrag.position().top;
        
        $('#score').html(currentImageX);

        if(currentImageX > 200) {
            ImmagineDrag.css({ 'top': '0', 'left': '0' });
        }            
    },
    stop: function () {
    }
});

as example, I want that when I drag the element over 200px (axis-y) it moves the current div at the posizion 0 0. Seems this doesnt works. How can I do/force it?

score 2 · Answer 1 · edited May 23 '17 at 10:25

Try this,

Demo

jQuery(document).ready(function($) {
        $(".myDiv").draggable({
            start: function () {
                ImmagineDrag = $(this);
            },
            drag: function () {
                currentImageX = ImmagineDrag.position().top;

                $('#score').html(currentImageX);

                if(currentImageX > 200) {   
                    ImmagineDrag.css({ 'top': '0', 'left': '0' });
                    return false; 
                }            
            },
            stop: function () {
            }
    });

Reference

score 2 · Accepted Answer · answered Sep 17 '12 at 19:03

Ok, I've been playing with this a bit and I've got some code to get you going, I think this code is doing what you want, see the jsfiddle .

I had to take a look at jqueryui source to find a way to do what you want, the code uses some private properties and calls a private method to achieve that. The basic idea behind my hack is I want to set cursorAt property at drag event time, because cursorAt in only evaluated by the jqueryui source on start drag event, so even if you changed it later the new value won't be used.

So by calling _adjustOffsetFromHelper() this reinterprets the parameter you pass as the new cursorAt property and apply it.

Now a tricky part was to figure out the correct top and left values to pass in new cursorAt property. I approximate them the best I could by using the private properties .offset.click.top and .offset.click.left, but for some thing the top didn't match and had to hardcode a value, it's probably some margin offset or the like, you could play with other private properties like .offset.top to try to get rid of the harcoded value.

To further improve upon this code you better have a look at the draggable jqueryui source , especially the _mouseStart() method (the code that executes at drag_start time) has some positioning variables that you may find useful.

Pasting of jsFiddle code:

HTML:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>

<div id="score">&nbsp;</div>

<div class="myDiv">1</div>
<div class="myDiv">2</div>
<div class="myDiv">3</div>

CSS:

#score
{
    height:50px;
}

.myDiv
{
    width:40px;
    height:40px;
    margin:10px;
    border:1px solid #000000;
    float:left;
    cursor:pointer;
    text-align:center;
    line-height:40px;
    position:relative;
    top:0;
    left:0;
}

JAVASCRIPT:

var adjusted = false;
$(".myDiv").draggable({
    start: function () {
        ImmagineDrag = $(this);
        startImageX = ImmagineDrag.position().top;
        startImageY = ImmagineDrag.position().left;
    },
    drag: function () {
        currentImageX = ImmagineDrag.position().top;
        currentImageY = ImmagineDrag.position().left;

        $('#score').html(currentImageX);

        if(currentImageX > 200) {
            if (!adjusted) {
                adjusted = true;
                drg = ImmagineDrag.data("draggable");
                ctop = drg.offset.click.top;
                cleft = drg.offset.click.left;
                newtop = currentImageX - startImageX + ctop;
                newleft = currentImageY - startImageY + cleft;
                drg._adjustOffsetFromHelper({top:newtop-12,left:newleft});
            }
        }            
    },
    stop: function () {
    }
});

score 1 · Answer 3 · answered Sep 17 '12 at 08:46

1

Just after your following line:

ImmagineDrag.css({ 'top': '0', 'left': '0' });

add this:

return false;

that should do what you want.

answered Sep 17 '12 at 08:46

Nelson

49,283
8
68
81

No, because I lost the "drag" function. I need to still move mouse, also if the div is far away than the mouse cursor. – markzzz Sep 17 '12 at 08:52
Well, you've hit a wall then, because there is no mechanism for moving the mouse via JavaScript. You should think about refactoring the interaction with your ui. – Nelson Sep 17 '12 at 08:59
No, mouse could be in the same posizion! Is the div that should move :) – markzzz Sep 17 '12 at 10:22

score 0 · Answer 4 · answered Sep 17 '12 at 08:23

0

The drag handler constantly updates the position, you could move your code to the stop handler. That way when you stop dragging it reverts to the 0,0 spot.

The draggable plugin has built in functionality to constrain movement to an axis or a bounding element, you should use that instead.

answered Sep 17 '12 at 08:23

Asciiom

9,867
7
38
57

Uhm, and how can I use it to constrain movement dynamically? (inside the drag, for example) – markzzz Sep 17 '12 at 08:26
What do you mean by 'inside the drag'? – Asciiom Sep 17 '12 at 08:27
the drag function `drag: function () { }`. In fact, as you see in the code, if I get the >200 on Y position, I want to change "at that moment" the position of my div (don't ask to me why, its a strange scenario :)) – markzzz Sep 17 '12 at 08:29
I don't think that is possible with the existing draggable plugin. It is not implemented because it's a very weird thing to do :) Can't you sketch the situation, maybe you need a different approach – Asciiom Sep 17 '12 at 08:46

thecodeparadox · Answer 5 · 2012-09-17T08:30:06.670

0

var ImmagineDrag  = null,
    currentImageX = null;

$(".myDiv").draggable({
    start: function() {
        ImmagineDrag = $(this);
    },
    drag: function() {
        currentImageX = ImmagineDrag.position().top;
        $('#score').html(currentImageX);
    },
    stop: function() {
        // place your CSS code to stop function
        if (currentImageX > 200) {
            ImmagineDrag.css({
                'top': '0',
                'left': '0'
            });
        }
    }
});

Demo

edited Sep 17 '12 at 08:30

answered Sep 17 '12 at 08:23

thecodeparadox

86,271
21
138
164

Yeah, you have done it on "stop". I need it on "drag" event :) – markzzz Sep 17 '12 at 08:31
I offered that answer 10 minutes ago, not what OP needs – Asciiom Sep 17 '12 at 08:40

Can't manually change top/left of a draggable div?

HTML

CSS

jQuery

5 Answers5