Drag and drop with jQuery and Raphael.js

Question

Hi I'm working on following project: http://seegermattijs.be/smart_open_path.html I want an alert box when the red circle gets dropped on the yellow square.

I used the following code:

$('.ui-draggable').draggable({});
   $( "#droppable" ).droppable({
      drop: function() {
      alert( "dropped" );
     }
  });

As you can see it does nothing at all.

Can somebody help me out? Thanks!

Answer 1

The example you posted work for me, but maybe not in the way you intended to work.

Drag & Drop only cares about the mouse position when the button goes down (to start it) and when it goes up after that (to end it). The position of the element that started the drag (the red circle in your case) does not matter. You may comment out the contents of the drag function and you will trigger the alert as long as you click on the red circle, move the cursor to the yellow square and release the mouse.

If you want the alert when the circle touch the square, you will need to check if circle is touching the square when the drag stop, and then fire the alert. You may add that code to the stop function in your code and it should work.

You may check this JSBin for a possible way to do it.