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);
    }
}
});

ANSWER -

好的，事实证明我需要添加一个“接受” - 就像这样

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

Answer 1

您正在使用ID而不是类 - 更改：

$("#dashboard").droppable({

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

$(".dashboard").droppable({

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

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

Answer 2

没有ID #dashboard，我认为#favouritesDashboard应该是可放置的

我认为应该是，

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

Answer 3

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

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

有效。

Droppable无法正常工作

3 个答案: