如何使用图像作为div内的可放置元素

Question

我在div中有一个图像，它可以作为droppable。 我想在拖动元素时将drop函数调用并将鼠标悬停在图像上。 我做到了但是掉线功能没有被顺利调用。 以下是我的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 {

        }
    }
});

}