javascript - div内のドロップ可能な要素として画像を使用する方法

Question

ドロップ可能として機能する div 内に画像があります。要素をドラッグして画像の上にカーソルを合わせるときにドロップ機能を呼び出したいです。やったのですが、ドロップ機能がスムーズに呼び出されません。以下は私のhtmlコードです

  <div id="divRecycle"><img id="imgRecycle" src="Images/RecycleBin.jpg"/></div>

以下、使用したcssです。

 .recycle-hover {
    padding: 10px;
    border:  2px dashed orange;
}

以下はJavaScriptコードです

function MakeRecycleBinDivDroppable() {
$("#imgRecycle").droppable({
    accept: ".sections,.cart-item",
    hoverClass: 'recycle-hover',
    helper: 'clone',
    cursor: 'move',
    drop: function (event, ui) {



        //check if the draggable element is a section or only a product.
        if ($(ui.draggable).hasClass("sections")) {
            //it is a section, we will delete the section and its products

        } else {

        }
    }
});

}