如何在jQuery Droppable事件中做些什么

Question

Hi all sorry if its a silly question.But I am new to javascript.

I have a div on which is draggable.Now I want to do some thing when that div is dropped So far I have write a simple alert but its not working. Can any one guide me how do I write some code in drop event.

Here is my code

<div id = "par" class = "ui-draggable" style="position: relative; height: 200px; width: 200px;outline:2px solid green">
</div>

<script>
     $('#par').draggable();
     $('#par').droppable({
            drop: function( event, ui ) {
                  alert("blabla");                                       
            }
     });
</script>

Here is link to fiddle Draggable droppable

Answer 1

Like MrObrian says, you need to be using draggable.stop for what you are tying to achieve.

This fiddle illustrates the difference. http://jsfiddle.net/MddyD/4/

$(function() {
 $('#par').draggable({
               stop: function() { 
                       alert("hi");
                     }
            });

 $("#dropIn").droppable({
               drop: function() { 
                       alert("drop");
                     }
               });        

Answer 2

Use Droppable.drop to catch what was dropped on droppable(You need to use both draggable and droppable)

http://docs.jquery.com/UI/Droppable#event-drop

<script>
     $('#thingToDrag").draggable();
     $('#par').droppable({
            accept: "#thingToDrag",
            drop: function( event, ui ) {
                  alert("draggable dropped");                                       
            }
     });
</script>

Answer 3

You need to use the dragstop event which will be launched when the draggable element will stop being dragged :

$('#par')
.draggable()
.on('dragstop', function(event, ui) {
    alert('ok')
});

http://jsfiddle.net/MddyD/3/

Answer 4

Here, you need to work with the object you setup as draggable. You can bind a function to the stop event.

<script>
    $(function() {
        $('#par').draggable({
            stop: function(event, ui) {
                alert("Dropped");
            }
        });
    });
</script>

the $(function(){ }); just tells the script to run when the document is done loading. You could also just bind any other function that you create to the stop event.

http://jqueryui.com/demos/draggable/#event-stop