将Jquery UI Sortable转换为表而不是ul

用户名

我正在尝试将ul的Jquery UI拖动山墙转换为表,但失败。这是Jquery UI链接http://jqueryui.com/sortable/#connect-lists这是我尝试得如此之快的方法,

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Sortable - Connect lists</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
    table td {
      padding: 10px;
    }
  </style>
  <script>
  $(function() {
    $( ".sortable" ).sortable({
      //connectWith: ".sortable"
    }).disableSelection();
  });
  </script>
</head>
<body>
<table border="1">
  <tr>
    <th>Name</th>
    <th>Task1</th>
    <th>Task2</th>
  </tr>
<tr>
  <td>
    <span class="ui-state-default sortable">Item 11</span>
    <span class="ui-state-default sortable">Item 12</span>
    <span class="ui-state-default sortable">Item 13</span>
  </td>
  <td>
    <span class="ui-state-default sortable">Item 11</span>
    <span class="ui-state-default sortable">Item 12</span> 
  </td>
  <td>
    <span class="ui-state-default sortable">Item 21</span>    
  </td>
</tr>
<tr>
  <td>
    <span class="ui-state-default sortable">Item 31</span>
    <span class="ui-state-default sortable">Item 32</span>  
  </td>
  <td>
    <span class="ui-state-default sortable">Item 41</span>    
  </td>
  <td>
    <span class="ui-state-default sortable">Item 51</span>
    <span class="ui-state-default sortable">Item 52</span>
    <span class="ui-state-default sortable">Item 53</span>
  </td>
</tr>

  </table>
</body>
</html>

这是JsBin链接http://jsbin.com/fucasipaje/1/,但是拖放操作无效。

Oleksandr T.

试试这个

  $(function() {
    $( "#table td" ).sortable({
      connectWith: "#table td"
    }).disableSelection();
  });

例子

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

将jQuery UI滑块小部件转换为AngularJS指令

来自分类Dev

jQuery UI Range Slider-将数字转换为货币

来自分类Dev

jQuery UI Sortable RowSpan在表内

来自分类Dev

将 .ui 转换为 .py

来自分类Dev

使用jquery-UI Sortable,当没有行时如何将行拖到表上?

来自分类Dev

jQuery UI sortable的占位符将元素推入其中

来自分类Dev

jQuery UI sortable的占位符将元素推入其中

来自分类Dev

遍历jQuery UI Sortable列表

来自分类Dev

jQuery UI .sortable和iFrame

来自分类Dev

如何将php数组转换为javascript数组以与Jquery UI datepicker一起使用?

来自分类Dev

将JSON.NET日期转换为jQuery UI Datepicker格式

来自分类Dev

如何将php数组转换为javascript数组以与Jquery UI datepicker一起使用?

来自分类Dev

将包含应用于jQuery UI Sortable表可防止将高行移动到最后一个位置

来自分类Dev

jquery 数据表 - 将 jquery UI 模式定位在所选记录下方

来自分类Dev

如何在拖动时将JQuery UI Sortable项目放置在鼠标光标处?

来自分类Dev

jQuery UI.Sortable在将li移动到溢出底部时跳转

来自分类Dev

jQuery UI selectmenu不是函数

来自分类Dev

Laravel:将jQuery UI Datepicker的m / d / Y转换为Ymd,然后保存到数据库

来自分类Dev

如何覆盖jQuery ui sortable的drag事件?

来自分类Dev

找不到文件“ jquery.ui.sortable”

来自分类Dev

在jQuery UI Sortable之后获取ID数组

来自分类Dev

jQuery UI Sortable connectWith恢复图标

来自分类Dev

jQuery UI Sortable - Multi Connected List Drag

来自分类Dev

使用jQuery UI Sortable显示隐藏

来自分类Dev

jQuery UI Sortable连接列表CSS问题

来自分类Dev

jQuery UI:在Sortable顶部显示div

来自分类Dev

jQuery UI Sortable方法触发得太快

来自分类Dev

jQuery UI Sortable 多元素目标

来自分类Dev

jQuery UI Sortable:如何使小区域可拖动,而不是整个可排序元素?

Related 相关文章

  1. 1

    将jQuery UI滑块小部件转换为AngularJS指令

  2. 2

    jQuery UI Range Slider-将数字转换为货币

  3. 3

    jQuery UI Sortable RowSpan在表内

  4. 4

    将 .ui 转换为 .py

  5. 5

    使用jquery-UI Sortable,当没有行时如何将行拖到表上?

  6. 6

    jQuery UI sortable的占位符将元素推入其中

  7. 7

    jQuery UI sortable的占位符将元素推入其中

  8. 8

    遍历jQuery UI Sortable列表

  9. 9

    jQuery UI .sortable和iFrame

  10. 10

    如何将php数组转换为javascript数组以与Jquery UI datepicker一起使用?

  11. 11

    将JSON.NET日期转换为jQuery UI Datepicker格式

  12. 12

    如何将php数组转换为javascript数组以与Jquery UI datepicker一起使用?

  13. 13

    将包含应用于jQuery UI Sortable表可防止将高行移动到最后一个位置

  14. 14

    jquery 数据表 - 将 jquery UI 模式定位在所选记录下方

  15. 15

    如何在拖动时将JQuery UI Sortable项目放置在鼠标光标处?

  16. 16

    jQuery UI.Sortable在将li移动到溢出底部时跳转

  17. 17

    jQuery UI selectmenu不是函数

  18. 18

    Laravel:将jQuery UI Datepicker的m / d / Y转换为Ymd,然后保存到数据库

  19. 19

    如何覆盖jQuery ui sortable的drag事件?

  20. 20

    找不到文件“ jquery.ui.sortable”

  21. 21

    在jQuery UI Sortable之后获取ID数组

  22. 22

    jQuery UI Sortable connectWith恢复图标

  23. 23

    jQuery UI Sortable - Multi Connected List Drag

  24. 24

    使用jQuery UI Sortable显示隐藏

  25. 25

    jQuery UI Sortable连接列表CSS问题

  26. 26

    jQuery UI:在Sortable顶部显示div

  27. 27

    jQuery UI Sortable方法触发得太快

  28. 28

    jQuery UI Sortable 多元素目标

  29. 29

    jQuery UI Sortable:如何使小区域可拖动,而不是整个可排序元素?

热门标签

归档