Câu hỏi jQuery có thể kéo được trình trợ giúp ở vị trí sai sau khi cuộn trang


Tôi đang sử dụng jQuery có thể kéo được và có thể phân hủy cho một hệ thống lập kế hoạch công việc tôi đang phát triển. Người dùng kéo công việc đến một ngày hoặc người dùng khác, và sau đó dữ liệu được cập nhật bằng cách sử dụng một cuộc gọi ajax.

Mọi thứ hoạt động tốt, ngoại trừ khi tôi cuộn xuống trang chính (Công việc xuất hiện trên một kế hoạch tuần lớn vượt quá đáy cửa sổ trình duyệt của tôi). Nếu tôi thử và kéo một phần tử có thể kéo vào đây, phần tử xuất hiện phía trên con trỏ chuột của tôi cùng một lượng pixel như tôi đã cuộn xuống .. Trạng thái di chuột vẫn hoạt động tốt và chức năng được bật nhưng không đúng.

Tôi đang sử dụng jQuery 1.6.0 và jQuery UI 1.8.12.

Tôi chắc chắn rằng có một chức năng bù đắp tôi cần phải thêm nhưng tôi không biết nơi để áp dụng nó, hoặc nếu có một cách tốt hơn. Đây là của tôi .draggable() mã khởi tạo:

$('.job').draggable({
  zIndex: 20,
  revert: 'invalid',
  helper: 'original',
  distance: 30,
  refreshPositions: true,
});

Bất kỳ ý tưởng những gì tôi có thể làm để sửa lỗi này?


76
2018-04-26 14:31


gốc


bạn có thể cung cấp một số bản demo làm việc không - jimy
@jimy tất cả đều năng động và rất an toàn nên tôi phải viết một ví dụ hoàn toàn mới; Tôi sẽ làm gì nếu không ai có câu trả lời nhanh ASAP. - Alex
Bạn có thể đăng tất cả các thuộc tính css mà đối tượng có thể kéo hoặc thừa kế của bạn không? - DarthJDG
Theo câu trả lời của tôi ở phía dưới, điều này dường như cuối cùng đã sửa - Patrick


Các câu trả lời:


Đây có thể là một báo cáo lỗi liên quan, nó đã được khoảng một thời gian: http://bugs.jqueryui.com/ticket/3740

Dường như nó xảy ra trên mọi trình duyệt mà tôi đã thử nghiệm (Chrome, FF4, IE9). Có một số cách bạn có thể giải quyết vấn đề này:

1. Sử dụng position:absolute; trong css của bạn. Các yếu tố vị trí tuyệt đối dường như không bị ảnh hưởng.

2. Đảm bảo phần tử gốc (sự kiện nếu đó là nội dung) có overflow:auto; bộ. Thử nghiệm của tôi cho thấy rằng giải pháp này sửa chữa vị trí, nhưng nó vô hiệu hóa chức năng autoscroll. Bạn vẫn có thể cuộn bằng cách sử dụng con lăn chuột hoặc các phím mũi tên.

3. Áp dụng sửa chữa được đề xuất trong báo cáo lỗi ở trên theo cách thủ công và kiểm tra kỹ nếu nó gây ra các sự cố khác.

4. Chờ một bản sửa lỗi chính thức. Nó được lên kế hoạch cho jQuery UI 1.9, mặc dù nó đã bị trì hoãn một vài lần trong quá khứ.

5. Nếu bạn tự tin rằng điều đó xảy ra trên mọi trình duyệt, bạn có thể đặt các hack này vào các sự kiện có thể kéo được của các đối tượng có thể kéo được để sửa các tính toán. Tuy nhiên, có rất nhiều trình duyệt khác nhau để kiểm tra, vì vậy nó chỉ nên được sử dụng như một phương sách cuối cùng:

$('.drag').draggable({
   scroll:true,
   start: function(){
      $(this).data("startingScrollTop",$(this).parent().scrollTop());
   },
   drag: function(event,ui){
      var st = parseInt($(this).data("startingScrollTop"));
      ui.position.top -= $(this).parent().scrollTop() - st;
   }
});

101
2018-04-26 20:09



Thật tuyệt vời, cảm ơn bạn! (Cài đặt tràn: tự động sửa nó ngay lập tức. Tôi đã áp dụng kiểu cho từng ô trong bảng. - Alex
jsfiddle.net/a2hzt/5  overflow-y: cuộn trên phần tử html cũng tạo ra vấn đề này trên firefox (chrome works), chỉ cần cuộn xuống và thử kéo. - digitalPBK
Đó là ba-a-ack, cho helper: "clone". bugs.jqueryui.com/ticket/9315Cấp độ người chặn, một khía cạnh lớn hơn. tj.vantoll nói "6 bản sửa lỗi có thể kéo được hạ cánh xuống 1.10.3 có thể là nghi ngờ". Ví dụ đơn giản nhất: jsfiddle.net/7AxXE - Bob Stein
Đã xác nhận, lỗi này nằm trong jQuery UI 1.10.3 nhưng không phải là 1.10.2 - Bob Stein
Có vẻ như vấn đề cũng tồn tại jQuery UI 1.10.4. Tôi sẽ chỉ dính vào 1.10.2 cho bây giờ! - lhan


Giải pháp này hoạt động mà không cần điều chỉnh vị trí của bất cứ điều gì, bạn chỉ cần sao chép các yếu tố và làm cho nó hoàn toàn vị trí.

$(".sidebar_container").sortable({
  ..
  helper: function(event, ui){
    var $clone =  $(ui).clone();
    $clone .css('position','absolute');
    return $clone.get(0);
  },
  ...
});

Trình trợ giúp có thể là một hàm cần trả về phần tử DOM để kéo.


41
2017-09-28 15:04



1 Cảm ơn rất nhiều, điều này làm việc cho tôi với sắp xếp (tôi đã về để thử một cái gì đó tương tự nhưng ít thanh lịch). Bạn có một lỗi đánh máy nhỏ với $ j mặc dù! :) - Iain Collins
Đối với tôi: kéo không làm việc ở tất cả với điều này và trả về lỗi: TypeError: this.offsetParent [0] is undefined - ProblemsOfSumit
Tôi nghĩ rằng đó là ui.helper không chỉ ui - Mohammed Joraid
Cảm ơn bạn đã giúp tôi với Sortable - BG Bruno
Sau khi bỏ phiếu này là một trong những giải pháp ít hacky tôi nhận ra vấn đề đối với tôi là cha mẹ position: relative như @Josh Bambrick đã khám phá - Dominic Tobias


Điều này làm việc cho tôi:

start: function (event, ui) {
   $(this).data("startingScrollTop",window.pageYOffset);
},
drag: function(event,ui){
   var st = parseInt($(this).data("startingScrollTop"));
   ui.position.top -= st;
},

11
2018-01-24 19:02



Giải pháp này làm việc tuyệt vời cho tôi. Cảm ơn! - Marc Litchfield
Làm việc tốt! ty - themis
khắc phục sự cố của tôi, "1.11.0" - Зелёный
làm việc trên jquery 1.10.2 hoàn toàn thay vì sửa chữa @DarthJDG - Andry Yosua
Đó là một giải pháp thú vị, nhưng nó sẽ chỉ hoạt động trên các trình duyệt có lỗi (Chrome). Các trình duyệt không có lỗi bây giờ sẽ có nó nhưng đảo ngược :) - manu


Có vẻ như lỗi này xuất hiện rất thường xuyên và mỗi lần có một giải pháp khác. Không có gì ở trên, hoặc bất cứ điều gì khác tôi tìm thấy trên internet làm việc. Tôi đang sử dụng jQuery 1.9.1 và Jquery UI 1.10.3. Đây là cách tôi đã sửa nó:

$(".dragme").draggable({
  appendTo: "body",
  helper: "clone",
  scroll: false,
  cursorAt: {left: 5, top: 5},
  start: function(event, ui) {
    if(! $.browser.chrome) ui.position.top -= $(window).scrollTop();
  },
  drag: function(event, ui) {
    if(! $.browser.chrome) ui.position.top -= $(window).scrollTop();
  }
});

Hoạt động trong FF, IE, Chrome, tôi chưa thử nghiệm nó trong các trình duyệt khác.


7
2018-06-04 06:22



điều này làm việc cho tôi, ngoại trừ tôi đã phải sử dụng ui.offset.top thay vì ui.position.top - c.dunlap


Xin lỗi vì đã viết một câu trả lời khác. Vì không có giải pháp nào trong câu trả lời ở trên có thể được tôi sử dụng, tôi đã làm rất nhiều Googling và thực hiện nhiều chỉnh sửa nhỏ trước khi tìm một giải pháp hợp lý khác.

Sự cố này dường như xảy ra bất cứ khi nào bất kì của các phần tử gốc có position đặt thành 'relative'. Tôi đã phải cải tổ lại đánh dấu của mình và thay đổi CSS nhưng bằng cách xóa thuộc tính này khỏi tất cả các bậc cha mẹ, tôi đã có thể nhận được .sortable()hoạt động bình thường trong tất cả các trình duyệt.


6
2017-07-13 17:01



Cũng vậy với tôi ở đây. Bất kì position: relative; trong bất kỳ bậc cha mẹ nào gây ra điều này xảy ra. - wojtiku
hoàn toàn aggree! Đối với tôi, nó chỉ là một phong cách nội tuyến trong cơ thể với position: relative; mà phải được loại bỏ .. các phần tử cha giữa phần kéo và phần thân dường như không gây ra vấn đề ở đây .. - con
omg đó là nó cảm ơn, garrr tại sao những người không sử dụng Dragula trong ngày và tuổi tác - cảm ơn! - Dominic Tobias
Cảm ơn bạn rất nhiều! Cha mẹ của cha mẹ có vị trí: tương đối gây ra nó cho tôi - wjk2a1


Lỗi này đã được chuyển đến http://bugs.jqueryui.com/ticket/6817 và, khoảng 5 ngày trước (ngày 16 tháng 12 năm 2013 hoặc ở xa) dường như cuối cùng đã được khắc phục. Đề xuất ngay bây giờ là sử dụng bản dựng phát triển mới nhất từ http://code.jquery.com/ui/jquery-ui-git.js hoặc chờ đợi phiên bản 1.10.4 có chứa bản sửa lỗi này.

Chỉnh sửa: Có vẻ như bản sửa lỗi này có thể là một phần của http://bugs.jqueryui.com/ticket/9315 không được lập lịch để thả cho đến phiên bản 1.11. Sử dụng phiên bản điều khiển nguồn được liên kết ở trên của jQuery dường như khắc phục vấn đề cho tôi và @Scott Alexander (bình luận bên dưới).


5
2017-12-22 02:04



Tôi đang sử dụng 1.10.4 và lỗi vẫn còn đó, sử dụng liên kết đó mặc dù và tất cả đang làm việc tốt. - Scott Alexander
@ScottAlexander Việc sửa chữa có thể đã gắn liền với một vé khác với tôi nghĩ. Tôi đã chỉnh sửa câu trả lời của tôi dựa trên đó. Cảm ơn! - Patrick


Tôi xóa tràn:

html {overflow-y: scroll; background: #fff;}

Và nó hoạt động hoàn hảo!


4
2017-09-27 08:27





Dường như đáng chú ý là lỗi này đã không được gắn quá lâu. Đối với tôi, đó là sự cố trên Safari và Chrome (tức là các trình duyệt webkit) nhưng không phải trên IE7 / 8/9 cũng như trên Firefox, tất cả đều hoạt động tốt.

Tôi thấy rằng thiết lập tuyệt đối hoặc cố định, có hoặc không có quan trọng, đã không giúp đỡ như vậy cuối cùng tôi đã thêm một dòng vào chức năng xử lý kéo của tôi:

ui.position.top += $( 'body' ).scrollTop();

Tôi đã mong muốn cần phải làm cho dòng cụ thể là webkit nhưng tò mò nó làm việc tốt ở khắp mọi nơi. (Mong đợi một bình luận từ tôi sớm nói 'er không, thực sự nó messed lên tất cả các trình duyệt khác'.)


3
2017-08-15 11:21



Điều này làm việc, nhưng khi bạn di chuyển trong khi kéo, nó vẫn thay đổi vị trí y. Giải pháp số 5 của DarthJDG cũng hoạt động khi di chuyển trong khi kéo. - mirelon


những gì tôi đã làm là:

$("#btnPageBreak").draggable(
        {
          appendTo: 'body',
          helper: function(event) {
            return '<div id="pageBreakHelper"><img  id="page-break-img"  src="page_break_cursor_red.png" /></div>';
          },
          start: function(event, ui) {
          },
          stop: function(event, ui) {
          },
          drag: function(event,ui){
            ui.helper.offset(ui.position);
         }
        });

3
2018-04-13 13:53





Tôi không hoàn toàn chắc chắn rằng điều này sẽ làm việc trong mọi trường hợp nhưng cách giải quyết này tôi chỉ làm việc cho tôi trên tất cả các tình huống khác nhau mà tôi phải kiểm tra (và các giải pháp được đề xuất trước đây ở đây và ở đâu khác đều thất bại)

(function($){
$.ui.draggable.prototype._getRelativeOffset = function()
{
    if(this.cssPosition == "relative") {
        var p = this.element.position();
        return {
            top: p.top - (parseInt(this.helper.css("top"),10) || 0)/* + this.scrollParent.scrollTop()*/,
            left: p.left - (parseInt(this.helper.css("left"),10) || 0)/* + this.scrollParent.scrollLeft()*/
        };
    } else {
        return { top: 0, left: 0 };
    }
};
}(jQuery));

(Tôi đã gửi nó đến trình theo dõi jQuery.ui để xem họ nghĩ gì về nó .. sẽ rất tuyệt nếu lỗi 4 năm cũ đó có thể được sửa chữa cuối cùng: /)


1
2017-07-26 10:04





Tôi đang sử dụng JQuery draggable trên Firefox 21.0, và tôi đang gặp vấn đề tương tự. Con trỏ giữ một inch phía trên hình ảnh trợ giúp. Tôi nghĩ rằng đây là một vấn đề trong bản thân Jquery mà vẫn chưa được giải quyết. Tôi tìm thấy một giải pháp cho vấn đề này, đó là sử dụng tài sản "cursorAt" của draggable. Tôi đã sử dụng nó như sau, nhưng người ta có thể thay đổi điều này theo yêu cầu của nó.

$('.dragme').draggable({
helper: 'clone',    
cursor: 'move',    
cursorAt: {left: 50, top: 80}
});

Chú thích:  Điều này sẽ được áp dụng cho tất cả các trình duyệt, vì vậy sau khi sử dụng mã này, hãy kiểm tra trang của bạn trong tất cả các trình duyệt để có được các vị trí trên cùng bên trái và trên cùng.


1
2018-06-18 16:05