Jak utworzyć narzędzie JQuery do przeciągnięcia za pomocą mniejszego klonu?

Question

Mam duży element, który jest wyświetlany na ekranie, który chciałbym upuścić na mniejszy cel upuszczenia. Dlatego chcę zmniejszyć rozmiar klonu, który można przeciągnąć, aby dopasować go do rozmiaru celu upuszczenia. Pomyślałem, że byłoby dobrze to animować. Wydaje mi się, że mniejszy klon nie może się skupić wokół kursora podczas przeciągania. Jakieś pomysły? Oto, co starałem: 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

Najprostszym podejściem jest użycie opcji cursorAt z ustawieniem "lewo" i "góra" do połowy wymiarów skurczonego pomocnika.

$(".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, która miała więcej pracy niż myślałem! Oto poprawka:

$(".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');  
    } 
}); 

Należy uwzględnić położenie zdarzenia i wyśrodkować je zgodnie z różnicą między środkami obu wielkości urządzeń przeciągających.

See fiddle here.