jQuery用戶界面的可排序的connectWith失敗，jQuery Mobile的

移動一個li元件與jQuery UI的可排序的一個ul HTML表不能與jQuery Mobile的工作（拖動的作品，但ul不接受li元素）。如果您評論jQuery Mobile導入的行，它將起作用。如果您再次取消註釋，它將停止工作。但我需要爲我的項目使用jQuery Mobile。此外，被拖動的元素的形狀隨着你的提升而改變（Firefox 29）。jQuery用戶界面的可排序的connectWith失敗，jQuery Mobile的

您可以找到HTML文件here的屏幕截圖。

上下文：我正在使用jQuery Mobile的混合/ Web應用程序。這是一款教育應用，在一種練習類型中，用戶必須將一些詞條拖到正確的列表中，但將該詞彙放在列表中不起作用，因爲該列表不接受新的li標籤。我簡化了場景，以便只有一個術語移動到一個列表中。

<html> 
    <head> 
<title>jQueryUI Sortables</title> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 

<!-- remove this line and the example will work (Firefox) --> 
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<!-- but I need jQuery Mobile in my project! --> 

<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<script src="jquery.ui.touch-punch.min.js"></script> 

<script type="text/javascript"> 
    $(function() { 
    $("#part_0").sortable({ 
     connectWith: "#col_0" 
    }); 
    $("#col_0").sortable({ 
     connectWith: "#part_0" 
    }); 
    }); 
</script> 
<style> 
li { margin: 0px; padding: 10px; float:left; border-radius: 5px; } 
.smallList {list-style-type: none; margin: 0; padding: 0; margin-bottom: 0px;} 
.bigList {width: 100%; height: 100%; list-style-type: none; margin: 0; padding: 0; margin-bottom: 0px;} 
.part {margin: 0px; padding: 10px; border-radius: 5px; background-color: Orange; color: White;} 
</style>  
</head> 
<body> 
<ul id="part_0" class="smallList"> 
    <li class="part">Drag this</li> 
</ul><br /><br /><br /><br /> 
<ul id="col_0" class="bigList"> 
    <li class="part">Into</li> 
    <li class="part">This</li> 
    <li class="part">List</li> 
</ul> 
</body> 
</html>

來源

2014-06-15 user3742403

你能提供一個樣本[的jsfiddle（http://jsfiddle.net）或東西展示問題..？ –

我添加了一個jsfiddle：[link]（http://jsfiddle.net/YCL3x/），但由於某種原因，它在那裏工作。如果你把我直接發佈到HTML文件而沒有jsfiddle的代碼，它將不能用於Firefox。但是我發現了一個解決方法，請參閱下面的答案。 – user3742403

經過幾天的嘗試，我終於找到了解決辦法。我不知道爲什麼，但如果您使用jQuery UI而不使用jQuery Mobile，則需要將ul標記設置爲float: left，這不是必需的。我不認爲這是明顯的，但加入這一行到CSS使得再次拖動工作：

<style> 
/* BEGIN INSERTION: */ 
ul { float: left; } 
/* END INSERTION */ 

li { margin: 0px; padding: 10px; float:left; border-radius: 5px; } 
.smallList {list-style-type: none; margin: 0; padding: 0; margin-bottom: 0px;} 
.bigList {width: 100%; height: 100%; list-style-type: none; margin: 0; padding: 0; margin-bottom: 0px;} 
.part {margin: 0px; padding: 10px; border-radius: 5px; background-color: Orange; color: White;} 
</style>

來源

2014-06-24 18:59:28 user3742403

jQuery用戶界面的可排序的connectWith失敗，jQuery Mobile的

回答

相關問題