用戶jQuery拖動一個DIV並放入一個TD ...並讓DIV「捕捉」到位

我正在完成對任務管理系統的重寫，並且正在添加拖放功能。用戶jQuery拖動一個DIV並放入一個TD ...並讓DIV「捕捉」到位

alt text

我希望用戶能夠從一列（TD）拖動任務DIV和另一列（TD）將其刪除。我有這個工作正常，除了一些小的格式問題。我有一個名爲droppable的TD接受可拖拽類。我想要發生的事情實際上是從當前TD中刪除任務DIV並將其附加到TD上的丟棄。

這裏是我的腳本：

<script type="text/javascript"> 
    $(function() { 
     $(".draggable").draggable({ 
      cursor: 'move', 
      cancel: 'a', 
      revert: 'invalid', 
      snap: 'true' 
     }); 
    }); 
    $(function() { 
     $(".droppable").droppable({ 
      accept: '.draggable', 
      hoverClass: 'droppable-hover', 
      drop: function(event, ui) { } 
     }); 
    }); 

</script>

這裏是我的HTML：

<h3> 
    My Queue</h3> 
<table style="width: 100%;" class="queue"> 
    <tbody> 
     <tr>    
      <td style="width: 14%; vertical-align:bottom ;" class="droppable" id="StagePG">     
      </td>    
      <td style="width: 14%; vertical-align:bottom ;" class="droppable" id="StageRY">     
      </td>   
      <td style="width: 14%; vertical-align:bottom ;" class="droppable" id="StagePR">     
       <div class="queue-item draggable" title="Task description goes here."> 
        <em>Customer</em> 
        <strong>Project</strong> 
        <h4><a href="/Sauron/Task/Details/100001">100001</a></h4> 
       </div> 

       <div class="queue-item draggable" title="Task description goes here."> 

        <em>Customer</em> 
        <strong>Project</strong> 
        <h4><a href="/Sauron/Task/Details/100002">100002</a></h4> 
       </div>    
      </td> 
      <td style="width: 14%; vertical-align:bottom ;" class="droppable" id="StageRT"> 
      </td> 
      <td style="width: 14%; vertical-align:bottom ;" class="droppable" id="StageTE"> 
      </td> 
      <td style="width: 14%; vertical-align:bottom ;" class="droppable" id="StageRL"> 
      </td>    
     </tr> 
    </tbody> 
    <tfoot> 
     <tr> 
      <td style="width: 14%; text-align: center;"> 
       Pending (0) 
      </td> 
      <td style="width: 14%; text-align: center;"> 
       Ready (0) 
      </td> 
      <td style="width: 14%; text-align: center;"> 
       In Progress (2) 
      </td> 
      <td style="width: 14%; text-align: center;"> 
       Ready for Testing (0) 
      </td> 
      <td style="width: 14%; text-align: center;"> 
       Testing (0) 
      </td> 
      <td style="width: 14%; text-align: center;"> 
       Ready for Release (0) 
      </td> 
     </tr> 
    </tfoot> 
</table>

與丟棄事件和如何實現這一奮鬥。任何幫助表示讚賞！

來源

2009-11-13 mattruma

你有沒有考慮過使用.sortable（）而不是.draggable（）？在單個容器（例如td內的div）內進行排序很好，並提供了一種在容器之間移動項目的非常簡單的方法。 – 2009-11-13 17:31:01

說實話...我真的需要能夠做到這一點......我需要允許在當前列中進行排序，然後向右和向左拖動。 – mattruma 2009-11-13 19:35:33

我認爲你是對的......排序是這樣的！ – mattruma 2009-11-13 21:03:58

這個例子的工作原理，但它仍然有待觀察，因爲div位於任何地方。這工作，因爲在事件被觸發第一個「可棄」，而不是「拖動」

$(function() { 

    $_dropEnd = null; 

    $(".draggable").draggable({ 
      cursor: 'move', 
      cancel: 'a', 
      revert: 'invalid', 
      snap: 'true', 
      stop: function(event, ui) { 
       $(this).appendTo($_dropEnd); 
       $_dropEnd = null; 
      } 
     }); 
    }); 
    $(function() { 
     $(".droppable").droppable({ 
      accept: '.draggable', 
      hoverClass: 'droppable-hover', 
      drop: function(event, ui) { 
       $_dropEnd = this; 
      } 
     }); 
    });

來源

2009-11-13 19:57:35

作爲@大衛活潑建議我們去與排序路線......也正是我需要它做的事！

來源

2009-11-15 12:18:14 mattruma

用戶jQuery拖動一個DIV並放入一個TD ...並讓DIV「捕捉」到位

回答

相關問題