javascript - 可丢弃不工作

Question

我正在尝试使可拖动和可放置的工作正常，而其中的放置部分不起作用。

$(function(){
    $(".draggable").draggable();
    $("#dashboard").droppable({
        drop: function(){
            alert("HEY!");
        }
    });
});

我在哪里犯错？

HTML-

<div class="leftSide">
    LeftSide
    <div id="favouritesDashboard" class="dashboard dashBoardIn">
         Dashboard
    </div>
</div>
<div class="center">
   Center
   <div class="draggable">
      DraggableTest
   </div>

这也可能是版本兼容性的问题-

   <script src= "https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>

那里的其他代码-

$(dashboard).click(function(){
    console.log("HELLO");
    if($(dashboard).hasClass("dashBoardIn")){
        $(dashboard).removeClass("dashBoardIn");
    $(dashboard).addClass("dashBoardOut");
    $(".dashboard").stop().animate({'marginLeft':'-2px'},200);
} else{
    if($(dashboard).hasClass("dashBoardOut")){
        $(dashboard).removeClass("dashBoardOut");
        $(dashboard).addClass("dashBoardIn");
    $(".dashboard").stop().animate({'marginLeft':'-85px'},200);
    }
}
});

回答-

好的，结果我需要添加一个“接受” - 像这样

    $("#favouritesDashboard").droppable({
    accept:".draggable",
    drop: function() {
        console.log("HEY!");
    }
});

Answer 1

好的，所以我需要添加一个接受 -

$("#favouritesDashboard").droppable({
    accept:".draggable",
    drop: function() {
        console.log("HEY!");
    }
});

这样可行。

Answer 2

您正在使用 id 而不是 class - 更改：

$("#dashboard").droppable({

为此（或使用#favouritesDashboard id 而不仅仅是#dashboard）：

$(".dashboard").droppable({

工作演示：http: //jsbin.com/ovamaf/1/

如果它仍然不起作用，则说明您的设置有问题（例如，您没有正确嵌入 jquery 或 jquery ui。请检查您的控制台是否有错误。

Answer 3

没有 id #dashboard，我认为#favouritesDashboard应该是 droppable

我觉得应该是

$(function(){
    $(".draggable").draggable();
    $("#favouritesDashboard").droppable({
        drop: function(){
            alert("HEY!");
        }
    });
});