Trên gridster giữ tiện ích con dưới chuột trong khi kéo

Question

Tôi thực sự sử dụng lưới để kéo một số mục.

Vùng chứa của tôi lớn hơn cửa sổ của tôi, vì vậy, tôi có thanh cuộn ở bên phải, như thường lệ. Bây giờ, nếu tôi muốn kéo một mục từ trên xuống dưới, tôi cần phải bấm vào nó và di chuyển chuột cùng một lúc.

Như bạn có thể thấy trên this fiddle, Nếu bạn lấy mục và bạn bắt đầu cuộn, mục ở vị trí đầu tiên của mình, bạn cần di chuyển chuột để đưa nó vào nó.

Có cách nào để giữ mục dưới chuột ngay cả khi bạn cuộn?

mẫu mã 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> 

mẫu mã css:

.container{ 
    height:1600px; 
} 

mẫu mã jQuery:

var gridster; 

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

Answer 1

Tôi đoán định nghĩa là một thuật toán, chúng tôi muốn các đối tượng có thể kéo, khi chúng ta cuộn, để ở vị trí của chuột. Vì vậy, chúng tôi cần một sự kiện onScroll ở đâu đó.

Thông thường, chúng tôi chỉ cập nhật vị trí của đối tượng với vị trí của con chuột, nhưng onScroll dường như không có thông tin vị trí chuột được đính kèm với nó. Nói lại nó, chúng tôi có thể nói rằng chúng tôi muốn đối tượng di chuyển/bù đắp bằng số tiền n bằng số tiền chúng tôi cuộn. Điều đó có thể hiệu quả.

Tất nhiên, cần phải có một số điểm chọc quanh lưới để tìm ra cách bù đắp đối tượng. Nhưng tôi nghĩ rằng một cái gì đó như thế này có thể làm việc:

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'); 

Example

Tôi đoán đây sẽ là một điểm khởi đầu tốt. Cảnh báo hiện tại, chính bản thân lưới không cập nhật cho đến khi một lần di chuột khác. Có thể cần phải nói nhiều hơn.

---

Cập nhật

Các phá vỡ mã ở trên vào kéo cuộn như gridster có nó thực hiện di chuyển riêng. Nhìn vào vấn đề tôi không thể tìm thấy cách phân biệt giữa cuộn kéo và cuộn bình thường (xem onMouseWheel và DOMMouseScroll nhưng không giống như nó được hỗ trợ tốt. Vì vậy, tôi cho rằng sửa chữa nhanh sẽ là tắt bù trừ khi cuộn nếu . gần mép Vì vậy, bổ sung sau đây:

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

Và chúng ta cần phải kiểm tra kéo Vì vậy, chúng ta thêm một handler kéo để gridster Cái gì như:..

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

Demo

Thành thực mà nói nó fe els có lẽ là một giải pháp tốt hơn và thanh lịch hơn (ngắn thực sự sửa đổi các plugin.có thể dễ dàng hơn nhiều)