Jquery drag and drop with Table Cells and getting

2019-09-08 07:30发布

站内问答 / jQuery
1612 1 4

here i have the following html, as it is basically match the following concept, i need to able drag and drop the AnswerSide Cells. Only Answers Side cells can me moved up and down. and after moving, we need to get the Text of the answer and its position. (as i am doing in asp.net, and the table will be genrated behind the code.)

  1. User can move up and down the Answers. (only Answers can be moved)
  2. We need to retrive the text, and its position
  3. We need to save it in DB

can any one tell me how to do this. i tried Jquery Ui sortables, as i am not getting it. as i am beginner, can anybody help me to solve the problem.

I updated with HtmlTable, and Div Layout, however now any one can help me to solve, in either way

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>

1条回答
女痞
2楼-- · 2019-09-08 07:55

Well. I agree with @tereško You should use divs. But even then, you will be faced with the same issues. You could just put a sortable next to another set of divs, but a sortable may not work for you especially if the answer rows need to match the height of the question rows.

Here is the code that you need to drag and drop answers. 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 />

And here is the jQuery code. Make sure you have included the jquery and jquery ui script files.

$(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();
            }
        }
    });
});

Whether you actually use divs or table cells, is irrelevant. The code still works in either divs or table cells. All you need to do after that is style the table cells.

To get the position of an answer, just use the index method.

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

To get an answer for a question, just use the eq method. Just know that it is 0 based so the answer to question 1 is eq(0) and the answer to question 2 is eq(1), etc...

var answer = $('.answer').eq(0).html();
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)