可丢弃不工作答案

【问题标题】：Droppable not working可丢弃不工作
【发布时间】：2012-11-20 09:48:34
【问题描述】：

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

$(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!");
    }
});

【问题讨论】：

警报（“嘿”）没有运行

标签： javascript jquery jquery-ui

【解决方案1】：

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

$("#dashboard").droppable({

到那个（或使用#favouritesDashboard id 而不仅仅是#dashboard）：

$(".dashboard").droppable({

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

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

【讨论】：

检查链接并与您所拥有的进行比较 - 这是这里最简单的方法。
我检查过，它是一样的-我已经发布了其他代码-这会干扰可放置的代码吗？

【解决方案2】：

没有 id #dashboard，我认为 #favouritesDashboard 应该是可删除的

我认为应该是，

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

【讨论】：

所以，仪表板是滑出的东西——我已经发布了那个代码——那个代码会干扰 droppable 吗？

【解决方案3】：

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

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

这行得通。

【讨论】：