Wie mache ich ein JQuery-Draggable mit einem kleineren Klon?

Question

Ich habe ein großes Element, das auf dem Bildschirm angezeigt wird, die ich gerne auf einem kleineren Drop-Ziel fallen lassen könnte. Daher möchte ich die Größe des ziehbaren Klons verringern, um der Größe des Drop-Ziels zu entsprechen. Ich dachte, es würde gut aussehen, um das zu animieren. Ich kann nicht scheinen, den kleineren Klon zu bekommen, um während des Ziehens um den Cursor zu zentrieren. Irgendwelche Ideen? Hier ist ein, was ich versucht: http://jsfiddle.net/a3Cj2/

$(".draggable").draggable({ 
    helper: 'clone', 
    start : function(event, ui){ 
     ui.helper.animate({ 
      width: 80, 
      height: 50 
     }); 
    }, 
    drag : function(event, ui){ 
     ui.helper.offset({ 
      left: event.pageX, 
      top: event.pageY 
     }); 
    } 
}); 

$("#target").droppable({ 
    drop : function(event, ui) { 
     console.log('dropped');  
    } 
}); 

Answer 1

Einfachster Ansatz bei weitem ist die Verwendung der Option cursorAt mit 'left' und 'top' auf die Hälfte der Dimensionen des geschrumpften Helfer gesetzt.

$(".draggable").draggable({ 
    helper: 'clone', 
    start: function (e, ui) { 
     ui.helper.animate({ 
      width: 80, 
      height: 50 
     }); 
    }, 
    cursorAt: {left:40, top:25} 
}); 

Updated fiddle

Answer 2

Wow, das mehr Arbeit nahm, als ich dachte! Hier ist das Update:

$(".draggable").draggable({ 
    helper: 'clone', 
    start : function(event, ui){ 
     ui.helper.animate({ 
      width: 80, 
      height: 50, 
      marginLeft: (300-80)/2 - (300/2 - event.offsetX), 
      marginTop: (200-50)/2 - (200/2 - event.offsetY) 
     }); 
    }, 
    drag : function(event, ui){ 

    } 
}); 

$("#target").droppable({ 
    drop : function(event, ui) { 
     console.log('dropped');  
    } 
}); 

Sie benötigen für die Veranstaltung Lage Rechnung zu tragen und zentrieren es entsprechend der Differenz zwischen den Zentren beider Größe draggables.

See fiddle here.