jQuery UI's Sortable's connectWith在jQuery Mobile上失败

jQuery UI's Sortable's connectWith fails with jQuery Mobile

本文关键字：jQuery 失败 Mobile connectWith UI Sortable      更新时间：2023-09-26

移动一个li元素到一个ul HTML列表与jQuery UI可排序不工作与jQuery移动(拖动工作，但ul不接受li元素)。如果您注释了导入jQuery Mobile的那一行，它就可以工作了。如果您再次取消注释，它将停止工作。但我需要jQuery移动为我的项目。此外，当你抬起被拖动的元素时，它的形状也会改变(Firefox 29)。

你可以在这里找到HTML文件的截图。

上下文:我正在使用jQuery移动的混合/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>

经过几天的尝试，我终于找到了一个解决方法。我不知道为什么，但是使用jQuery Mobile，你需要将ul标签设置为float: left，这是没有必要的，如果你使用jQuery UI没有jQuery Mobile。我不认为这是明显的，但添加这一行到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>
相关文章：