javascript - ドラッグおよびドロップ時の破線の境界線

Question

ユーザーにアイテムをドラッグアンドドロップさせようとしています。アイテムがその場所から持ち上げられると、代わりに灰色の破線のボックスが表示される必要があります。アイテムが別の場所の近くに移動すると、ボックスが移動して、アイテムをドロップするターゲット (灰色の破線のボックス) が開きます。(画像参照)

これが私の現在のjQueryです。

$(function() {
    $( "#sortable" ).sortable({
      revert: true
    });

    $( "#draggable" ).draggable({
       connectToSortable: "#sortable",
       revert: "invalid",
       cursor: "move"
    });
    $( "ul, li" ).disableSelection();
});

// when the DOM is ready:
$(document).ready(function () {
    // find the div.fade elements and hook the hover event
    $('div.fade').hover(function() {
        // on hovering over, find the element we want to fade *up*
        var fade = $('> div', this);


        // if the element is currently being animated (to a fadeOut)...
        if (fade.is(':animated')) {
              // ...take it's current opacity back up to 1
              fade.stop().fadeTo(250, 1);
        } else {
              // fade in quickly
              fade.fadeIn(250);
        }
    }, function () {
        // on hovering out, fade the element out
        var fade = $('> div', this);
        if (fade.is(':animated')) {
              fade.stop().fadeTo(3000, 0);
        } else {
              // fade away slowly
              fade.fadeOut(500);
        }

    });

});