jQuery UI拖放不工作

我做了一些JQuery UI可拖动的实验，但目前我的应用程序不工作，我不明白为什么。下面的代码：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的包括。有人能帮助我吗？

来源

2012-09-17 Cláudio Ribeiro

将jQuery UI的版本更改为1.8.23并重新测试。 –

它不适用于1.8.23 ... –

然后它是jQuery版本。无论如何，你更喜欢使用jQuery UI 1.8.23，它非常稳定。在jQuery 1.7.2中使用它。 –

找到了答案，问题是我使用jQuery 1.8.0，它不支持jQuery UI，我更改为jQuery 1.7.2，现在它工作正常。

来源

2012-09-18 08:40:25

总结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>

你有它上面的方式，代码中的相关元素之前会尝试和执行，甚至被加载。

来源

2012-09-17 20:16:37 j08691

它仍然有一个奇怪的行为，而不是我期待的拖放行为。 –

“奇怪的行为”是什么意思？这里看起来很好http://jsfiddle.net/j08691/dA8wG/。 – j08691

当我尝试拖动一个元素时，它会在列表div中创建一堆“

product 1

”。而我不能拖动元素。 –

jQuery UI拖放不工作

回答

相关问题