jQuery可拖动的表元素

Question

jQuery可拖动的表元素

cdl*_*ary 28 css jquery drag-and-drop html-table

jQuery的draggable功能似乎不适用于表(在FF3或Safari中).这是一种很难想象如何将工作,所以它不是令人惊讶的是它没有.

<html>
  <style type='text/css'>
    div.table { display: table; }
    div.row { display: table-row; }
    div.cell { display: table-cell; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js"></script>
  <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.draggable.js"></script>
  <script>
  $(document).ready(function(){
    $(".row").draggable();
  });
  </script>
  <body>
    <div class='table'>
      <div class='row'>
        <div class='cell'>Foo</div>
        <div class='cell'>Bar</div>
      </div>
      <div class='row'>
        <div class='cell'>Spam</div>
        <div class='cell'>Eggs</div>
      </div>
    </div>
    <table>
      <tr class'row'><td>Foo</td><td>Bar</td></tr>
      <tr class='row'><td>Spam</td><td>Eggs</td></tr>
    </table>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

我想知道a)是否有任何具体原因导致这不起作用(从w3c/HTML规范角度来看)和b)获得可拖动表行的正确方法是什么.

我喜欢真正的桌子,因为边框折叠和行高算法 - 任何可以做这些事情的替代方案都可以正常工作.

Answer 1

Ari*_*sky 35

有一种方法可以使用JQuery UI使表行可拖动.您需要做的就是将一个辅助选项设置为一个函数,该函数返回一个新的div,其中包含一个表,它将托管您正在拖动的行:

helper: function(event){
return $('<div class="drag-cart-item"><table></table></div>').find('table').append($(event.target).closest('tr').clone()).end();
},

Run Code Online (Sandbox Code Playgroud)

向David Petersen致谢:http://blog.petersendidit.com/post/drag-table-row-to-a-div-with-jquery/

好技术!在使用它时,不要忘记你的`$ .droppable()`元素上的任何`drop`回调仍然可以引用`ui.draggable`属性来定位原始的row元素.所以你不需要牺牲任何功能,同时使用一个稍微有点时髦的助手(希望有意义) (3认同)

Answer 2

Von*_*onC 22

如果你有真正的表格数据,你应该坚持使用表格.

如果你想在表格中拖动行,这个JQuery +"draggable row table"库在FireFox3中完美运行

不知道是否故意,但你的答案完全押韵:) (3认同)
@AndresIlich我试着再次看一下这个答案,/希望能抓住一个副歌/这将说明一些设施/英语写作能力/但我发现这种努力是徒劳的.(http://english.blogoverflow.com/2011/11/the-basics-of-limerick-composition/) (3认同)

Answer 3

Eni*_*lus 11

万一有人犯同样的错误我做了:

如果你想通过拖动它们来重新排序表中的TR,那么.sortable就是你需要的而不是.draggable

只有我？

归档时间：	16 年，11 月前
查看次数：	50030 次
最近记录：	9 年，1 月前