0

Jquery UI のドラッグ可能な実験を行っていますが、現在アプリケーションが機能しておらず、その理由がわかりません。コードは次のとおりです。

<html>
<head>

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

<script type="text/javascript">

$(".productItem").draggable({
    helper: 'clone',
    handle: "productItem"
});

$("#basket").droppable({
    accept: ".productItem",
    drop: function(event, ui){
        $("<div></div>")
            .html(ui.draggable.text())
            .appendTo($(this));
    }
});


</script>
</head>

<body>

<h2>Products</h2>
<div id="list">
<div class="productItem">product 1</div>
<div class="productItem">product 2</div>
<div class="productItem">product 3</div>
</div>

<hr/>

<h2>Basket</h2>
<div id="basket" style = "height: 100px; border: 1px solid red;">

</div>

</body>
</html>

このコードは JsFiddle で動作していますが、クロムで動作させることができないようですので、jQuery が含まれているためだと思います。誰か助けてくれませんか？

4

2 に答える 2

3

jQuery コードを document ready ブロック内にラップします。

<script type="text/javascript">
$(document).ready(function() {
    $(".productItem").draggable({
        helper: 'clone',
        handle: "productItem"
    });
    $("#basket").droppable({
        accept: ".productItem",
        drop: function(event, ui) {
            $("<div></div>").html(ui.draggable.text()).appendTo($(this));
        }
    });
});​
</script>

上記の方法では、コードは関連する要素が読み込まれる前に実行しようとします。

于 2012-09-17T20:16:37.707 に答える
0

答えが見つかりました。問題は、jQueryUIをサポートしていないjQuery1.8.0を使用していたことでした。これを、jQuery 1.7.2に変更したところ、完全に機能しています。

于 2012-09-18T08:40:25.203 に答える