How to use image as a droppable element inside div

Asked Mar 07 '15 at 15:32

Active Mar 07 '15 at 15:32

Viewed 307 times

I have an image inside div which acts as droppable. I want to call drop function when dragging element and hover over the image. I did it but drop function is not getting called smoothly. Below is my html code

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

Below is the css used.

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

Below is the javascript code

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 {

        }
    }
});

}

asked Mar 07 '15 at 15:32

sandeep.mishra

Can you make a jsfiddle showing the issue? – Wesley Smith Mar 07 '15 at 15:59
what does `not called smoothly` mean? Provide a demo that replicates your issue – charlietfl Mar 07 '15 at 16:00
I want to trigger the drop event whenever the dragged elemnt is hover over the image. Now when the mouse is not over image but at random place the drop event occurs. – sandeep.mishra Mar 12 '15 at 12:42
Why do you need `helper` and `cursor` options in droppable? jsFiddle example would be useful. – alemv Mar 30 '15 at 17:55

How to use image as a droppable element inside div

0 Answers0