このサンプルは、jQueryのDraggable()プラグインを利用してオブジェクトをドロップするときに各種オプションを設定します。左側のボックスにドロップするときはドラッグしたオブジェクトが完全にボックス内に移動したときにドロップできるようにします。真中のボックスにドロップするときはドラッグしたオブジェクトがボックスに接触したときにドロップできるようにします。右側のボックスにドロップするときは、ポインターがボックス内に移動したときにドロップできるようにします。ドロップ可能なときはボックスの背景色が変わります。
$('#drag').Draggable();
$('#drop1').Droppable({
accept : 'dropaccept',
activeclass: 'dropactive',
hoverclass: 'drophover',
tolerance: 'fit'
});
$('#drop2').Droppable({
accept : 'dropaccept',
activeclass: 'dropactive',
hoverclass: 'drophover',
tolerance: 'intersect'
});
$('#drop3').Droppable({
accept : 'dropaccept',
activeclass: 'dropactive',
hoverclass: 'drophover',
tolerance: 'pointer'
});