gridster.js 自定义拖拽句柄

gridster.js 自定义拖拽句柄,只有鼠标按住该元素才允许拖动单元格。

代码例子

 var gridster;
 $(function () {
      // 初始化对象
      gridster = $(".gridster > ul").gridster({
        widget_margins: [5, 5],
        widget_base_dimensions: [100, 55],
        //定义按住样式为.handle才允许拖动
        //css筛选器对象也可以是标签和ID
        draggable: {
          handle: '.handle'
        }
      }).data('gridster');

      var widgets = [
        ['<li><lable class="handle"></lable>0</li>', 1, 2],
        ['<li>1</li>', 3, 2],
        ['<li>2</li>', 3, 2],
        ['<li>3</li>', 2, 1],
      ];
      // 调用add_widget方法
      $.each(widgets, function (i, widget) {
        gridster.add_widget.apply(gridster, widget)
      });
 });

在线试一试