title: Positioning cursorAt while dragging Jquery UI Draggable
body: <p>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. </p>
  
  <p>I was hoping I could do:</p>
  
  <pre><code>$(this).draggable("option", "cursorAt", {
                                          left: 0,
                                          top:0
                                      }); 
  </code></pre>
  
  <p>Where the top / left attribute would change, but it doesn't seem to want to work.</p>
  
  <p>Here's how I'm doing it:</p>
  
  <pre><code>$( "#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 &gt; 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');
                              }
  
  
                      });
  </code></pre>
  
  <p>As Always, thanks in advance.</p>
  
  <p>Ps I also tried simply top &amp; left 0 and using css margin-left: +/- the width of the element.</p>