我正在使用可拖动的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中令人担忧,但我似乎无法使其在chrome中工作,所以我认为这是因为jQuery include。有人可以帮我吗?
将您的jQuery代码包装在文档就绪块内:
<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>
您上面的方式,代码将在相关元素尚未加载之前尝试并执行。
十个山姆妈妈。 Tylko,您和我的母亲jQuery 1.7.2。 :// Kompletnie nie wiem o co chodzi。 Niedziałaani z dysku ani z serwera :( Kod jest na pewnodobry。Korzystamz najnowszegochroma。Jakieśteorie ???Pozdrawiam:)
[找到答案,问题是我使用的是jQuery 1.8.0,它不支持jQuery UI,我改为jQuery 1.7.2,现在它运行良好。