网站搜索

javascript - 在 gridster 中拖动时保持鼠标下的部件

我实际上使用 gridster 来拖动一些项目。

我的容器比我的窗口大，所以，像平常一样，我的右侧有一个滚动条。现在，如果我想把一个项目从顶部拖到底部，我需要同时点击它并滚动鼠标。

正如你在这个示例中看到的，如果你拿起这个项目并开始滚动，这个项目会停在它的初始位置，你需要移动鼠标才能把它带到那里。

有没有办法即使滚动也能让鼠标下的物品保持不变？

示例 HTML 代码：

<div class="container">
  <div class="gridster">
    <ul>
       <li data-row="1" data-col="1" data-sizex="2" data-sizey="2">0</li>
       <li data-row="1" data-col="3" data-sizex="1" data-sizey="2">1</li>
       <li data-row="1" data-col="4" data-sizex="1" data-sizey="1">2</li>
       <li data-row="3" data-col="2" data-sizex="3" data-sizey="1">3</li>
       <li data-row="4" data-col="1" data-sizex="1" data-sizey="1">4</li>
       <li data-row="3" data-col="1" data-sizex="1" data-sizey="1">5</li>
       <li data-row="4" data-col="2" data-sizex="1" data-sizey="1">6</li>
       <li data-row="5" data-col="2" data-sizex="1" data-sizey="1">7</li>
       <li data-row="4" data-col="4" data-sizex="1" data-sizey="1">8</li>
       <li data-row="1" data-col="5" data-sizex="1" data-sizey="3">9</li>
    </ul>
  </div>
</div>

示例 CSS 代码：

.container{
    height:1600px;
}

示例 jQuery 代码：

 var gridster;

  $(function(){
    gridster = $(".gridster ul").gridster({
      widget_base_dimensions: [100, 55],
      widget_margins: [5, 5],
    }).data('gridster');
  });

答案＃1

我想如果定义为一个算法，我们希望可拖动的对象在滚动时保持在鼠标所在的位置。所以我们需要某个地方有一个 onScroll 事件。

通常，我们只是将对象的位置更新为鼠标的位置，但 onScroll 似乎没有附带鼠标位置信息。换句话说，我们可以说我们希望对象移动/偏移一个与我们滚动的量相等的 n 数量。那可能行得通。

当然，需要对 Gridster 做一些探索才能弄清楚如何偏移对象。但我认为像这样的方式可能可行：

var gridster = $(".gridster ul").gridster({
  widget_base_dimensions: [100, 55],
  widget_margins: [5, 5],
  draggable: {
    start: function (e, ui, $widget) {
      var that = this , //to access gridster from inside onscroll
          oldScroll = $(document).scrollTop() //to calculate scroll change 
          obj = $(this.helper ? this.$helper : this.$player) //draggable/helper

      $(document).on("scroll", function () {
        //calculate scroll change
        var curr = $(document).scrollTop()
        var diff = curr-oldScroll
        oldScroll = curr
        //add change to stored offset for gridster
        that.drag_api.el_init_offset.top += diff 

        //show change temporarily because gridster doesn't update
        obj.css({
        　　'top': parseFloat(obj.css("top")) + diff
        });

      })
    },
    stop: function (e, ui, $widget) {
    　　$(document).off("scroll")
    }
  }
}).data('gridster');

例子

我想这将是一个好的起点。当前的警告是，网格本身在下一次鼠标移动之前不会更新。可能需要更多的尝试。

更新

上述代码在拖拽滚动时会出错，因为 gridster 有自己的滚动实现。看了这个问题后，我找不到区分拖拽滚动和普通滚动的方法（查看了 onMouseWheel 和 DOMMouseScroll，但看起来支持不太好）。所以我猜一种快速的解决方法是在靠近边缘时禁止滚动时的偏移。因此添加这些：

//change stored offset for gridster if not on edge
if(!that.edge) that.drag_api.el_init_offset.top += diff

我们还需要检查拖动。因此我们在 gridster 上添加一个拖动处理程序。类似这样：

  drag:function(e,ui,$widget){
     //check if edge
     var pixelFromEdge=100
     this.edge= e.clientY< pixelFromEdge ||
     $("html")[0].clientHeight-e.clientY < pixelFromEdge   
  },

演示

老实说，我感觉可能有一个更好、更优雅的解决方案（除非真的修改插件，否则可能会容易很多）。