Jquery拖放表格单元格并获取其保存位置

这里我有以下html，因为它基本上匹配以下概念，我需要能够拖放AnswerSide单元格。 只有答案边细胞可以让我上下移动。 移动后，我们需要得到答案的文本及其位置。 （正如我在asp.net中所做的那样，表格将在代码后面生成。）

1. 用户可以在答案中上下移动。 （ 只能移动答案 ）
2. 我们需要检索文本及其位置
3. 我们需要将其保存在DB中

任何人都可以告诉我如何做到这一点。 我试过Jquery Ui sortables ，因为我没有得到它。 因为我是初学者，任何人都可以帮助我解决问题。

我使用HtmlTable和Div Layout进行了更新，但现在任何人都可以帮助我以任何方式解决问题

用于以下HTML的JSFIDDLE链接

Div布局的Jsfiddle

  // this div is needed to 
 
 
QuestionSide
 
Answer Side
 
 
 
Question 1 
 
 Ans1 
 
 
 
question 2 
 
 Ans2 
 
 
 
 
 question 3
 
 Ans3 
 
 
 
 
 question 4
 
 Ans4 
 
 
 
 
 question 5 
 
 Ans5 
 
 
 
  

Answer 1

好。 我同意@tereško你应该使用div。 但即便如此，你也将面临同样的问题。 你可以在另一组div旁边放一个sortable，但是sortable可能不适合你，特别是如果答案行需要匹配问题行的高度。

以下是拖放答案所需的代码。 HTML：

 
 
 
QuestionSide
 
Answer Side
 
 
 
Question 1 
 
 Ans1 
 
 
 
 
question 2 
 
 Ans2 
 
 
 
 
 question 3
 
 Ans3 
 
 
 
 
 question 4
 
 Ans4 
 
 
 
 
 question 5 
 
 Ans5 
 
 
 
 

 Get position of answer 1
 Get position of answer 2
 Get position of answer 3
 Get position of answer 4
 Get position of answer 5
 

 Get answer of question 1
 Get answer of question 2
 Get answer of question 3
 Get answer of question 4
 Get answer of question 5
 

这是jQuery代码。 确保已包含jquery和jquery ui脚本文件。

 $(document).ready(function(e) { $('.answer').draggable({ axis: 'y', opacity: 0.5, containment: $('#qatable'), revert: true, revertDuration: 0, distance: 10, cursor: 'pointer' }).droppable({ accept: '.answer', tolerance: 'pointer', drop: function(event, ui) { ui.droppable = $(this); var answers = $('#qatable').find('.answer'); toindex = answers.index(ui.droppable); fromindex = answers.index(ui.draggable); var placeholder = $('
 
').insertBefore(ui.droppable); // Placeholder if (toindex < fromindex) { // Moving an answer up for (var i=toindex;ifromindex;i--) { answers.eq(i).insertBefore(answers.eq(i-1)); // Shift everything up } ui.draggable.insertBefore(placeholder); // Move the draggable answer to where the other one was placeholder.remove(); } } }); }); 

你是否真的使用div或表格单元格是无关紧要的。 代码仍可在div或表格单元格中使用。 之后您需要做的就是设置表格单元格。

要获得答案的位置，只需使用索引方法。

 var pos = $('.answer').index($('.answer1'))+1; 

要获得问题的答案，只需使用eq方法即可。 只知道它基于0，所以问题1的答案是eq(0) ，问题2的答案是eq(1)等等……

 var answer = $('.answer').eq(0).html();