在网格上，拖动时保持小部件在鼠标下方

On gridster keep widget under mouse during drag

本文关键字：小部 鼠标 网格 拖动      更新时间：2023-09-26

我实际上使用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');
  });

定义为一种算法，我们想要拖拽对象，当我们滚动时，停留在鼠标所在的位置。所以我们需要一个onScroll事件

通常，我们只是用鼠标的位置更新对象的位置，但是onScroll似乎没有附加鼠标位置信息。换句话说，我们可以说，我们希望对象移动/偏移n的量等于我们滚动的量。那可以。

当然，需要围绕网格进行一些探索，以找出如何偏移对象。但我认为这样做是可行的:

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   
  },

演示

老实说，感觉可能有一个更好更优雅的解决方案(除了实际修改插件)。这可能会容易得多)

相关文章：