jQuery的拖放处理表格单元格下降，让他们的保存位置 [英] Jquery drag and drop with Table Cells and getting their position to save

查看：154 发布时间：2016/6/15 23:22:53 jquery asp.net jquery-ui-draggable jquery-sortable

本文介绍了jQuery的拖放处理表格单元格下降，让他们的保存位置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在这里，我有以下的HTML，因为它基本上是符合以下概念，我需要能够拖放AnswerSide细胞。仅问答侧面细胞可以箱上下移动。和移动之后，我们需要得到的答案，其位置的文本。（因为我在做asp.net，并且该表将在code后面genrated。）

用户可以上下移动的答案。（答案只有可移动）

我们需要以检索的文本，它的位置

我们需要将其保存在DB

任何一个可以告诉我如何做到这一点。我想 jQuery UI的sortables 的，因为我没有得到它。因为我是初学者，任何人可以帮助我解决这个问题。

我HTMLTABLE更新和DIV布局，但现在任何一个可以帮我解决，在任何一种方式

的jsfiddle链接下面的HTML

的jsfiddle的股利布局

 ＆LT; HTML和GT;
    ＆LT;表边框=1＆GT;
    ＆所述; TR＆GT;
        ＆LT; TD＆GT; QuestionSide＆LT; / TD＆GT;
        ＆LT; TD＆GT;回答边＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
        ＆所述; TR＆GT;
            ＆LT; TD＆GT;问题1 LT; / TD＆GT;
            ＆LT; TD＆GT;＆LT; DIV＆GT; ANS1＆LT; / DIV＆GT; ＆LT; / TD＆GT; //这个格是需要
        ＆LT; / TR＆GT;
        ＆所述; TR＆GT;
            ＆LT; TD＆GT;问题2'; / TD＆GT;
            ＆LT; TD＆GT;＆LT; DIV＆GT; ANS2＆LT; / DIV＆GT; ＆LT; / TD＆GT;
        ＆LT; / TR＆GT;
        ＆所述; TR＆GT;
            ＆所述; TD＆GT;问题3'; / TD＆GT;
            ＆LT; TD＆GT;＆LT; DIV＆GT; ANS3＆LT; / DIV＆GT; ＆LT; / TD＆GT;
        ＆LT; / TR＆GT;
        ＆所述; TR＆GT;
            ＆所述; TD＆GT;问题4℃; / TD＆GT;
            ＆LT; TD＆GT;＆LT; DIV＆GT; ANS4＆LT; / DIV＆GT; ＆LT; / TD＆GT;
        ＆LT; / TR＆GT;
        ＆所述; TR＆GT;
            ＆所述; TD＆GT;问题5℃; / TD＆GT;
            ＆LT; TD＆GT;＆LT; DIV＆GT; ANS5＆LT; / DIV＆GT; ＆LT; / TD＆GT;
        ＆LT; / TR＆GT;
    ＆LT; /表＆gt;
＆LT; / HTML＆GT;

解决方案

嘛。我同意@你tereško应该使用的div。但即使是这样，你将面临着同样的问题。你可以只放一个排序的旁边，另一组div的，但排序可能不适合你的工作，特别是如果答案行需要匹配的问题行的高度。

下面是你需要拖放答案code。
HTML：

 ＆LT;表边框=1ID =qatable＆GT;
＆所述; TR＆GT;
    ＆LT; TD＆GT; QuestionSide＆LT; / TD＆GT;
    ＆LT; TD＆GT;回答边＆LT; / TD＆GT;
＆LT; / TR＆GT;
    ＆所述; TR＆GT;
        ＆LT; TD＆GT;问题1 LT; / TD＆GT;
        ＆LT; TD＆GT;＆LT; DIV CLASS =答案ANSWER1＆GT; ANS1＆LT; / DIV＆GT; ＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
    ＆所述; TR＆GT;
        ＆LT; TD＆GT;问题2'; / TD＆GT;
        ＆LT; TD＆GT;＆LT; DIV CLASS =答案ANSWER2＆GT; ANS2＆LT; / DIV＆GT; ＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
    ＆所述; TR＆GT;
        ＆所述; TD＆GT;问题3'; / TD＆GT;
        ＆LT; TD＆GT;＆LT; DIV CLASS =答案ANSWER3＆GT; ANS3＆LT; / DIV＆GT; ＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
    ＆所述; TR＆GT;
        ＆所述; TD＆GT;问题4℃; / TD＆GT;
        ＆LT; TD＆GT;＆LT; DIV CLASS =答案answer4＆GT; ANS4＆LT; / DIV＆GT; ＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
    ＆所述; TR＆GT;
        ＆所述; TD＆GT;问题5℃; / TD＆GT;
        ＆LT; TD＆GT;＆LT; DIV CLASS =答案answer5＆GT; ANS5＆LT; / DIV＆GT; ＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; BR /＆GT;＆LT; BR /＆GT;
＆LT;按钮的onclick =警报（$（'答案'）指数（$（'ANSWER1。'））+ 1）;＆GT;获得答案1 LT的位置; /按钮＆GT;＆LT; BR /＆GT;
＆LT;按钮的onclick =警报（$（'答案'）指数（$（'ANSWER2。'））+ 1）;＆GT;获得答案2'的位置; /按钮＆GT;＆LT; BR /＆GT;
＆LT;按钮的onclick =警报（$（'答案'）指数（$（'ANSWER3。'））+ 1）;＆GT;得到的答案第3版的位置，/按钮＆GT;＆LT; BR /＆GT;
＆LT;按钮的onclick =警报（$（'答案'）指数（$（'answer4。'））+ 1）;＆GT;获取答案4'的位置，/按钮＆GT;＆LT; BR /＆GT;
＆LT;按钮的onclick =警报（$（'答案'）指数（$（'answer5。'））+ 1）;＆GT;获得答案5'的位置; /按钮＆GT;＆LT; BR /＆GT;
＆LT; BR /＆GT;＆LT; BR＆GT;
＆LT;按钮的onclick =警报（$（'答案'）EQ（0）的.html（））;＆GT;获取问题1 LT的答案，/按钮＆GT;＆LT; BR /＆GT;
＆LT;按钮的onclick =警报（$（'答案'），EQ（1）的.html（））;＆GT;获取问题2'的答案，/按钮＆GT;＆LT; BR /＆GT;
＆LT;按钮的onclick =警报（$（'答案'），EQ（2）的.html（））;＆GT;获取问题3'的答案，/按钮＆GT;＆LT; BR /＆GT;
＆LT;按钮的onclick =警报（$（'答案'）EQ（3）的.html（））;＆GT;获取问题4'的答案，/按钮＆GT;＆LT; BR /＆GT;
＆LT;按钮的onclick =警报（$（'答案'）EQ（4）的.html（））;＆GT;获取问题5℃的答案，/按钮＆GT;＆LT; BR /＆GT;

这里是jQuery的code。请确保你已经包括jQuery和jQuery UI的脚本文件。

  $（文件）。就绪（函数（五）{
    $（'答案'）。拖动（{
        轴：'Y'，
        不透明度：0.5，
        遏制：$（'＃qatable'），
        回复：真，
        revertDuration：0，
        距离：10，
        光标：指示器
    }）。可弃（{
        接受：。答，
        宽容：指示器，
        下降：函数（事件，UI）{
            ui.droppable = $（本）;
            VAR答案= $（'＃qatable'）找到（'答案'）。
            元素范围= answers.index（ui.droppable）;
            的fromIndex = answers.index（ui.draggable）;
            VAR占位符= $（'＆LT; DIV ID =占位符＆GT;＆安培; NBSP;＆LT; / DIV＆GT;'）。的insertBefore（ui.droppable）; //占位符
            如果（元素范围为＆LT;的fromIndex）{//移动一个答案了
                对于（VAR I =元素范围; I＆LT;的fromIndex，我++）{
                    answers.eq（ⅰ）.insertBefore（answers.eq第（i + 1））; //移位都记录下来
                }
                ui.draggable.insertBefore（占位符）; //移动拖动回答到另一次是
                placeholder.remove（）;
            }其他{//移动答案下降
                对于（VAR I =元素范围; I＆GT;的fromIndex;我 - ）{
                    answers.eq（ⅰ）.insertBefore（answers.eq（I-1））; //移位的一切行动
                }
                ui.draggable.insertBefore（占位符）; //移动拖动回答到另一次是
                placeholder.remove（）;
            }
        }
    }）;
}）;

不管你实际使用的div或表格单元格，是无关紧要的。在code仍然工作在任何的div或表单元格。所有你需要的之后做的是样式表格单元格。

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

  VAR POS = $（'答案'）指数（$（'ANSWER1。'））+ 1。

要得到一个问题的答案，只需使用EQ方法。只知道它是基于0所以对问题1回答是 EQ（0）和对问题2回答是方程（1），等...

  VAR答案= $（'答案'）EQ（0）。html的（）。

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.)

User can move up and down the Answers. (only Answers can be moved)
We need to retrive the text, and its position
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>

解决方案

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

这篇关于jQuery的拖放处理表格单元格下降，让他们的保存位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

jQuery的拖放处理表格单元格下降，让他们的保存位置 [英] Jquery drag and drop with Table Cells and getting their position to save

问题描述

相关文章

C#/.NET最新文章

热门教程

热门工具

登录关闭

jQuery的拖放处理表格单元格下降，让他们的保存位置 [英] Jquery drag and drop with Table Cells and getting their position to save

问题描述

相关文章

C#/.NET最新文章

热门教程

热门工具

登录 关闭

登录关闭