Question

My Code :

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?

Answer 1

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 () {
    }
});​

​
​