Хорошо. Я согласен с @ tereško Вы должны использовать div. Но даже тогда вы столкнетесь с такими же проблемами. Вы можете просто поместить сортируемую строку рядом с другим набором элементов div, но сортируемая может не сработать, особенно если строки ответов должны соответствовать высоте строк вопросов.
Вот код, который вам нужен для перетаскивания ответов.
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"> </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();