小さなクローンでJQuery Draggableを作成するにはどうすればよいですか？

Question

小さなドロップターゲットでドロップできるようにするために、画面に表示される大きな要素があります。したがって、ドロップターゲットのサイズに合わせてドラッグ可能なクローンのサイズを小さくしたいです。私はこれをアニメ化するのがいいと思った。ドラッグ中にカーソルの周りに小さなクローンを中心に置くようには思えません。何か案は？ここに私が試したものです： 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

最も簡単なアプローチは、縮んだヘルパーの半分の寸法に 'left'と 'top'を設定して、cursorAtオプションを使用することです。

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

Updated fiddle

Answer 2

うわー、思ったよりも多くの仕事を取っています！

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

イベントの位置を考慮して、両方のサイズのドラッグの中心の違いに合わせて調整する必要があります。

See fiddle here。