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

Question

大家好，抱歉，如果这是一个愚蠢的问题。但是，我是javascript新手。

我有一个可拖动的div。现在我想在删除该div时做一些事情到目前为止，我已经编写了一个简单的警报，但它不起作用。 谁能指导我如何在drop事件中编写一些代码。

这是我的代码

<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>

这里是链接捣鼓可拖动可弃

Answer 1

就像MrObrian所说，您需要使用draggable.stop来实现目标。

这个小提琴说明了差异。 http://jsfiddle.net/MddyD/4/

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

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

Answer 2

使用Droppable.drop捕获放置在droppable上的内容（您需要同时使用Draggable和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

您需要使用dragstop事件，该事件将在draggable元素停止拖动时启动：

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

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

Answer 4

在这里，您需要使用设置为可拖动的对象。 您可以将函数绑定到stop事件。

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

$（function（）{}）; 只是告诉脚本在文档加载完成后运行。 您也可以将您创建的任何其他函数绑定到stop事件。

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