jQuery可拖动表格元素

jQuery draggable table elements(jQuery可拖动表格元素)
本文介绍了jQuery可拖动表格元素的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

jQuery 的 draggable 功能似乎不适用于表格(在 FF3 或 Safari 中).很难想象这会如何工作,所以它不工作也就不足为奇了.

jQuery's draggable functionality doesn't seem to work on tables (in FF3 or Safari). It's kind of difficult to envision how this would work, so it's not really surprising that it doesn't.

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

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

I'm was wondering a) if there's any specific reason why this doesn't work (from a w3c/HTML spec perspective) and b) what the right way to go about getting draggable table rows is.

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

I like real tables because of the border collapsing and row height algorithm -- any alternative that can do those things would work fine.

推荐答案

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

If you have truly tabular data, you should stick with table indeed.

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

And if you want to drag rows within a table, this JQuery + "draggable row table" library works perfectly in FireFox3

这篇关于jQuery可拖动表格元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

wkhtmltopdf print-media-type uses @media print ONLY and ignores the rest(Wkhtmltopdf print-media-type仅使用@media print,而忽略其余内容)
How to trim() white spaces from a string?(如何从字符串中去掉()空格?)
price depend on selection of radio input(价格取决于无线电输入的选择)
calculate price depend on selection without button(根据没有按钮的选择计算价格)
How to minify json response?(如何缩小JSON反应?)
Minify CSS with Node-sass(使用Node-Sass缩小CSS)