Jquery从列表拖放排序到表单元格不工作_Jquery_Html_Sorting_Jquery Ui

Jquery从列表拖放排序到表单元格不工作

jquery html sorting jquery-ui

Jquery从列表拖放排序到表单元格不工作,jquery,html,sorting,jquery-ui,Jquery,Html,Sorting,Jquery Ui,我有一个可排序的列表，我想把它的列表项放在一个表单元格中，然后从表单元格到表单元格对单元格中的项进行排序第一步是将列表项拖动到tblcell中。第二步排序表中的列表项（2列）只有单元格中的列表项才能排序，而不是表第一列中的固定数字。将单元格项返回列表的第三步 <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <script src="j

我有一个可排序的列表，我想把它的列表项放在一个表单元格中，然后从表单元格到表单元格对单元格中的项进行排序

第一步是将列表项拖动到tblcell中。第二步排序表中的列表项（2列）只有单元格中的列表项才能排序，而不是表第一列中的固定数字。将单元格项返回列表的第三步

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="jquery-1.11.3.min.js" ></script>
<script src="jquery-ui.js"></script>

<style>
 #sortable1 {
    border: 1px solid #CCC;
    width: 220px;
    min-height: 20px;
    list-style-type: none;
    margin: 0;
    padding: 2px 0 0 0;
    float: left;
    margin-right: 5px;
    font-size:10px;
  }
  #sortable1 li {
    margin: 0 5px 5px 5px;
    padding: 2px;
    font-size: 1.2em;
    width: 200px;
  }
</style>

</head>

<body>
  <script>
  $(function() {
    $("#sortable1,.tblsort").sortable({
    items: 'td',
    cursor: 'pointer',
    connectWith: '.tblsort',
    axis: 'y',
    dropOnEmpty: true,
    receive: function(e, ui){
     $(this).find("tbody").append(ui.item);   
    }
});
  });
  </script>
 <ul id="sortable1" class="connectedSortable" style="cursor:pointer;">
   <li class="ui-state-default">Suburb</li>
  <li class="ui-state-default">City</li>
  <li class="ui-state-default">Province</li>
</ul>
   <table width="300" border="0" cellspacing="0" cellpadding="0" class="tblsort">
  <tbody>
    <tr>
      <td>1</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>2</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>3</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

</body>
</html>


无标题文件
#可排序1{
边框：1px实心#CCC；
宽度：220px；
最小高度：20px；
列表样式类型：无；
保证金：0；
填充：2px0；
浮动：左；
右边距：5px；
字体大小：10px；
}
#可排序1李{
保证金：0 5px 5px 5px；
填充：2px；
字体大小：1.2米；
宽度：200px；
}
$（函数（）{
$（“#可排序1，.tblsort”）。可排序({
项目：‘td’，
光标：“指针”，
连接方式：'.tblsort'，
轴：‘y’，
真的，
接收：功能（e、ui）{
$（this.find（“tbody”）.append（ui.item）；
}
});
});


城市
省

1.
2.
3.

使用jQueryUI对表格单元格进行排序没有多大意义，因为它会破坏表格布局。对表行进行排序可能对您有用，而且不会造成破坏

由于需要拖放元素，因此需要使用适当的jQueryUI小部件和

在我看来，这似乎是一个糟糕的解决方案，我宁愿使用一些按钮在列表和表之间交换数据。这很糟糕，因为我可以在Firefox中看到一些bug，而且很难拖动表，但要避免表行排序。但如果必须使用拖动，则有一种解决方案：

$（函数（）{
$（“#可拖动”）。可拖动({
回复：对，
恢复持续时间：0
});
$（“#可拖动”）.可拖放({
drop：函数（事件、用户界面）{
var表=$（此）；
$（ui.draggable）.find（'td:n个子（2n）'）。每个（函数（i）{
table.find（'li:eq（'+i+'））.text（$（this.text（））；
})
}
});
$（“.tblsort”）.可拖放({
drop：函数（事件、用户界面）{
var表=$（此）；
$（ui.draggable）.find（'li'）.each（函数（i）{
table.find（'td:nth child（2n）：eq（'+i+'））.text（$（this.text（））；
})
}
});
$（“.tblsort tbody”）。可排序({
助手：函数（e、ui）{
ui.children（）.each（函数（））{
$（this.width（$（this.width（））；
});
返回用户界面；
},
更新：功能（事件、用户界面）{
$（this）.find（'td:n个子（2n+1）'）。每个（函数（i）{
$（本）.text（i+1）；
});
}
});
$（“.tblsort”）.draggable({
回复：对，
恢复持续时间：0
});
});
*{
框大小：边框框；
字体系列：无衬线；
}
#拖拉的{
边框：1px实心#CCC；
宽度：220px；
列表样式类型：无；
保证金：0；
填充：0；
浮动：左；
边缘底部：20px；
}
#可拖动的李{
利润率：10px；
填充物：2px 5px；
}
.tblsort{
边框：1px实心#ccc；
边界间距：10px；
边界塌陷：分离；
明确：两者皆有；
光标：抓取
}
.tblsort td{
边框：1px实心#ccc；
填充物：2px 5px；
光标：ns调整大小
}
.tblsort td:n个孩子（1）{
宽度：30px；
}



城市
省

1.
aa
2.
bb
3.
复写的副本