使用表格单元格拖放 Jquery 并获取它们的位置以保存答案

【问题标题】：Jquery drag and drop with Table Cells and getting their position to save使用表格单元格拖放 Jquery 并获取它们的位置以保存
【发布时间】：2012-03-08 06:02:40
【问题描述】：

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

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

谁能告诉我怎么做。我试过Jquery Ui sortables，因为我不明白。作为初学者，谁能帮我解决这个问题。

我更新了 HtmlTable 和 Div 布局，但是现在任何人都可以帮助我解决，无论哪种方式

JSFIDDLE Link for Following HTML

Jsfiddle for Div Layout

<html>
    <table border="1">
    <tr>
        <td>QuestionSide</td>
        <td>Answer Side</td>
    </tr>
        <tr>
            <td>Question 1  </td>
            <td><div> Ans1 </div> </td> // this div is needed to 
        </tr>
        <tr>
            <td>question 2 </td>
            <td><div > Ans2  </div> </td>
        </tr>
        <tr>
            <td> question 3</td>
            <td><div> Ans3  </div> </td>
        </tr>
        <tr>
            <td> question 4</td>
            <td><div> Ans4  </div> </td>
        </tr>
        <tr>
            <td> question 5 </td>
            <td><div> Ans5  </div> </td>
        </tr>
    </table>
</html>

【问题讨论】：

请停止使用表格进行布局！现在已经不是 1999 年了。
好的，如果可能的话，你能在 div'also 中用相同的布局显示我吗
@tereško 我用 Div Lay 更新了，你能帮帮我吗？

标签： jquery asp.net jquery-ui-draggable jquery-ui-sortable

【解决方案1】：

嗯。我同意@tereško 你应该使用 div。但即便如此，你也会面临同样的问题。你可以在另一组 div 旁边放一个 sortable，但 sortable 可能对你不起作用，尤其是当答案行需要与问题行的高度匹配时。

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

<table border="1" id="qatable">
<tr>
    <td>QuestionSide</td>
    <td>Answer Side</td>
</tr>
    <tr>
        <td>Question 1  </td>
        <td><div class="answer answer1"> Ans1 </div> </td>
    </tr>
    <tr>
        <td>question 2 </td>
        <td><div class="answer answer2"> Ans2  </div> </td>
    </tr>
    <tr>
        <td> question 3</td>
        <td><div class="answer answer3"> Ans3  </div> </td>
    </tr>
    <tr>
        <td> question 4</td>
        <td><div class="answer answer4"> Ans4  </div> </td>
    </tr>
    <tr>
        <td> question 5 </td>
        <td><div class="answer answer5"> Ans5  </div> </td>
    </tr>
</table>
<br /><br />
<button onclick="alert($('.answer').index($('.answer1'))+1);">Get position of answer 1</button><br />
<button onclick="alert($('.answer').index($('.answer2'))+1);">Get position of answer 2</button><br />
<button onclick="alert($('.answer').index($('.answer3'))+1);">Get position of answer 3</button><br />
<button onclick="alert($('.answer').index($('.answer4'))+1);">Get position of answer 4</button><br />
<button onclick="alert($('.answer').index($('.answer5'))+1);">Get position of answer 5</button><br />
<br /><br>
<button onclick="alert($('.answer').eq(0).html());">Get answer of question 1</button><br />
<button onclick="alert($('.answer').eq(1).html());">Get answer of question 2</button><br />
<button onclick="alert($('.answer').eq(2).html());">Get answer of question 3</button><br />
<button onclick="alert($('.answer').eq(3).html());">Get answer of question 4</button><br />
<button onclick="alert($('.answer').eq(4).html());">Get answer of question 5</button><br />

这里是 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 = $('<div id="placeholder">&nbsp;</div>').insertBefore(ui.droppable); // Placeholder
            if (toindex < fromindex) { // Moving an answer up
                for (var i=toindex;i<fromindex;i++) { 
                    answers.eq(i).insertBefore(answers.eq(i+1)); // Shift everything down
                }
                ui.draggable.insertBefore(placeholder); // Move the draggable answer to where the other one was
                placeholder.remove();
            } else { // Moving the answer down
                for (var i=toindex;i>fromindex;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 或表格单元格。之后您需要做的就是设置表格单元格的样式。

要获得答案的位置，只需使用 index 方法即可。

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

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

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

【讨论】：