jquery拖放表格單元格，並獲得他們的位置保存

在這裏我有以下html，因爲它基本上匹配以下概念，我需要能夠拖放AnswerSide單元格。只有答案方格可以讓我上下移動。在移動之後，我們需要得到答案的文本和它的位置。（因爲我做在asp.net，並表將在後面的代碼被genrated。）jquery拖放表格單元格，並獲得他們的位置保存

用戶可以上下移動的答案。（只有答案可以移動）
我們需要以檢索的文本，它的位置
我們需要將其保存在DB

任何一個可以告訴我如何做到這一點。我試過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>

來源

2012-03-08 Ravi Gadag

請停止使用表格佈局！現在不是1999年了。 – 2012-03-08 06:10:50

好的，如果可能的話，你可以告訴我在div'also，相同的佈局 – 2012-03-08 06:14:21

@tereško我更新了Div Lay，你能幫我嗎？ – 2012-03-08 06:26:35

嘛。我同意@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">&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();

來源

2012-03-08 07:03:57

謝謝，請儘快回覆 – 2012-03-08 08:18:46

jquery拖放表格單元格，並獲得他們的位置保存

回答

相關問題