Question

使用jQuery UI Sortable将li元素移动到ul HTML列表不适用于jQuery Mobile（拖动工作，但ul不接受li元件）。如果您评论导入jQuery Mobile的行，它将起作用。如果您再次取消评论，它将停止工作。但是我的项目需要jQuery Mobile。此外，拖动元素的形状会随着它的提升而变化（Firefox 29）。

您可以找到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>

Answer 1

经过几天的努力，我终于找到了解决办法。我不知道为什么，但是使用jQuery Mobile，如果你使用没有jQuery Mobile的jQuery UI，你需要将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>

jQuery UI Sortable connectWith与jQuery Mobile失败

1 个答案: