-4

ドラッグ可能およびドロップ可能にしようとしていますが、ドロップ部分が機能していません。

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

3 に答える 3

0

承知しました。承諾を追加する必要がありました-

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

それはうまくいきます。

于 2012-11-20T10:36:39.367 に答える
0

class の代わりに id を使用しています - それを変更してください:

$("#dashboard").droppable({

それに (または #dashboard の代わりに #favouritesDashboard id を使用):

$(".dashboard").droppable({

実際のデモ: http://jsbin.com/ovamaf/1/

それでも機能しない場合は、セットアップに問題がある可能性があります (たとえば、jquery または jquery ui を正しく埋め込んでいないなど)。コンソールでエラーを確認してください。

于 2012-11-20T09:54:29.063 に答える
0

IDはなく、ドロップ可能である必要がある#dashboardと思います#favouritesDashboard

そうあるべきだと思いますが、

$(function(){
    $(".draggable").draggable();
    $("#favouritesDashboard").droppable({
        drop: function(){
            alert("HEY!");
        }
    });
});
于 2012-11-20T09:56:01.083 に答える