我实际上使用 gridster 来拖动一些元素。
我的容器比我的窗口大,所以,像往常一样,我在右侧有一个滚动条。现在,如果我想将一个元素从顶部拖到底部,我需要单击它并同时滚动鼠标。
正如您在 this 上看到的那样fiddle,如果你拿起元素开始滚动,元素停留在他的第一个位置,你需要移动鼠标把它带到它。
有一种方法可以在滚动时将元素保持在鼠标下方吗?
示例 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 的量等于我们滚动的量。这可能行得通。
当然,需要对 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
},
老实说,感觉可能有一个更好更优雅的解决方案(除了实际修改插件。这可能会容易得多)
关于javascript - 在 Gridster 上,拖动期间将小部件保持在鼠标下方,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23760118/