如何检测元素是否在另一个元素之上

Question

I want to do the drag and drop action in my case.

I want to apply droppable in one of my elements so when the dragged element drop in the droppable element, the second element will add another class.

Html

<div id='drag'>
   <img src='http://i60.tinypic.com/1191gxt.jpg' />
   <img src='http://i60.tinypic.com/1191gxt2.jpg' />
</div>

<div id ='drop'>
   <img src='object.jpg'/>
</div>

js

$('#drag').draggable();
$('#drop').droppable({
            drop: function(event, ui){
              $(this).addClass( "ui-state-highlight" )
            }
        })

My codes don't seem to work. Can anyone help me what happened? Thanks a lot!

Answer 1

Checked your code and it's working: jsfiddle

Answer : Check if your dependencies (jQuery, jQuery UI) are being loaded and the script is called after the document is loaded. Also make sure the image on drop area exists or at least dimensions of #drop are set.