Javascript 如何将Gridster与div一起使用（非ul）

我正在尝试使用jQuery拖放库。但是，我的HTML的结构与此JSFIDLE（）相同。我不能让gridster工作。也就是说，拖放行为不会发生

我的HTML结构有div，而不是无序列表中的列表项（ul>li）i）我想使.section box类成为可拖动的类，并相互替换。我怎样才能用Gridster做到这一点

ii）除此之外，如果可能的话，我甚至可以将table row（tr）元素设置为可拖动的元素

JSFiddle：

HTML

---

谢谢

我想试试这样的东西：

$(function() {
    $("tbody tr").gridster({
        widget_margins: [5, 5],
        widget_selector: "> td"
    })
});

但是您缺少了

.data（'gridster'）

部分。

gridster.js（）的dmorse分支可以使用“使用divs而不是li”

每个可移动项都可以由DIV构造（而不是通常的LI）包装或定义

只需给每个DIV元素一个有意义的类名，并使用[widget\u selector:ClassName或HtmlConstruct]参数告诉Gridster查找DIV.myclassname

如果不更改此参数，则假定为LI（列表项）

例如：

<div class="gridster">
    <div class="myGrid"><!-- grid elements now -->
       <div class="myGridItem" data-sizey="2" data-sizex="2" data-col="4" data-row="1">... stuff in here</div>
       <div class="myGridItem" data-sizey="1" data-sizex="1" data-col="1" data-row="3">... stuff in here</div>
       etc etc
    <!-- end grid elements --></div>
</div>

$(function() {
    $("tbody tr").gridster({
        widget_margins: [5, 5],
        widget_selector: "> td"
    })
});

<div class="gridster">
    <div class="myGrid"><!-- grid elements now -->
       <div class="myGridItem" data-sizey="2" data-sizex="2" data-col="4" data-row="1">... stuff in here</div>
       <div class="myGridItem" data-sizey="1" data-sizex="1" data-col="1" data-row="3">... stuff in here</div>
       etc etc
    <!-- end grid elements --></div>
</div>

 $(function(){
    gridster = $(".gridster > div.myGrid").gridster({
    widget_margins: [5, 5],
    widget_selector: 'div.myGridItem'
   }).data('gridster');