Question

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

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

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

我使用HtmlTable和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>

Answer 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或表格单元格中使用。之后您需要做的就是设置表格单元格。

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

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

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

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

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

1 个答案: