Positioning cursorAt while dragging Jquery UI Draggable

Question

I'm hoping someone could help me with this. I assumed it would be a simple matter looking to the CursorAt options with jQuery Draggable, but perhaps I'm missing something. Essentially I want to position my dragging element under my mouse cursor at the top left, or top right position.

I was hoping I could do:

$(this).draggable("option", "cursorAt", {
                                        left: 0,
                                        top:0
                                    }); 

Where the top / left attribute would change, but it doesn't seem to want to work.

Here's how I'm doing it:

$( "#matches ul li:first-child" ).draggable({ 
                            addClasses: true, 
                            snap: true,
                            cursor: "crosshair",
                            start: function(event, ui) {
                                $(this).draggable("option", "cursorAt", {
                                    left: Math.floor(this.clientWidth / 2),
                                    top: Math.floor(this.clientHeight / 2)
                                }); 
                            },
                            drag: function(event, ui) {
                                var dragged = ui.helper;
                                var dragged_data = dragged.data('draggable');
                                var direction = (dragged_data.originalPosition.left > dragged.position().left) ? 'left' : 'right';
                                $( "#matches ul li:first-child" ).removeClass('left right').addClass( direction );
                                if( direction == "left"){
                                     $(this).draggable("option", "cursorAt", {
                                        left: 0,
                                        top:0
                                    }); 
                                }else{
                                     $(this).draggable("option", "cursorAt", {
                                        right: 0,
                                        top:0
                                    }); 

                                }   
                            },                      
                            stop: function(event, ui) {
                                $( "#matches ul li:first-child" ).removeClass('left right');
                            }


                    });

As Always, thanks in advance.

Ps I also tried simply top & left 0 and using css margin-left: +/- the width of the element.

Answer 1

did you want something like this? e http://jsfiddle.net/deveshz/YvmFf/2/

Or have the cursor fixed to the top left?