Question

我想在gridster.js中获取每个小部件的数据属性。

draggable: {
      stop: function(event, ui) {
        var positions = JSON.stringify(this.serialize());
        var att = $(".gridster ul li").attr('data-id');
        alert(att);
        //localStorage.setItem('positions', positions);
        //console.log(positions);
        $.ajax ({
          url: '/partA-save-widgets-positions',
          type: 'POST',
          data: {
            'positions': positions
          },
          dataType: 'JSON',
          error: function(log) {
            console.log(log);
          },
          success: function(log) {
            console.log(log);
          }
        })
      }

html

<div class="gridster">
   <ul>
      @foreach($widgets as $wi)
      <li data-row="2" data-id="7">values</li>
      @endforeach
    </ul>
 </div>

使用

 var att = $(".gridster ul li").attr('data-id');
    alert(att); //undefined

Answer 1

您可以在此处使用ui变量来实现此目的： -

var att = $(ui.$helper[0]).attr('data-row'); 
alert(att);

作为建议，您始终可以使用console.log()自行调试代码并检查ui变量实际指向的内容并调试更多以查找它具有的对象属性然后查找当前被拖动的元素，正如我们在上面的评论中所讨论的那样：

draggable: {
  stop: function(event, ui) {
    console.log(ui);  // check the properties here
    console.log(ui.$helper);  // check other properties inside ui
    console.log($(ui.$helper[0]).attr('data-id'));  // final required value
  }
}

希望这有助于在使用draggable或任何其他jquery ui窗口小部件时出现同样问题的用户！

在Gridster中获取小部件数据属性

1 个答案: