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>

这是小提琴的链接 Draggable droppable

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事件：

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

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

Answer 4

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

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

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

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

如何在jquery droppable事件中做一些事情

4 个答案: