Soru sayfa kaydırıldı sonra jQuery sürüklenebilir yanlış yerde yardımcı gösterir


JQuery kullanıyorum sürüklenebilir ve droppable geliştirdiğim bir iş planlama sistemi için. Kullanıcılar işleri farklı bir güne veya kullanıcıya sürükler ve ardından ajax çağrısı kullanılarak veriler güncellenir.

Ana sayfada aşağı kaydırmak dışında her şey iyi çalışıyor (Jobs, tarayıcı penceremin altını aşan büyük bir hafta planlayıcısında görünür). Buraya sürüklenebilir bir eleman denemeyi ve sürüklemeyi seçersem, elemanım fare imlecinin üstünde, aşağı kaydırdığımla aynı miktarda pikselin üstünde görünür. Vurgulu durum hala iyi çalışıyor ve işlevsellik patlıyor ama doğru görünmüyor.

JQuery 1.6.0 ve jQuery UI 1.8.12 kullanıyorum.

Eminim ki eklemem gereken bir ofset işlevi var ama nerede kullanacağımı bilmiyorum ya da daha iyi bir yol varsa. İşte benim .draggable() başlatma kodu:

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

Bunu düzeltmek için ne yapabilirim?


76
2018-04-26 14:31


Menşei


bazı çalışma demoları sağlayabilir misiniz - jimy
@jimy hepsi dinamik ve çok güvenli, bu yüzden yepyeni bir örnek yazmam gerekecek; Hiç kimsenin hızlı bir cevabı ASAP yoksa, yapacağım. - Alex
Tüm css özelliklerini sürükleyebilir veya devralabilir mi? - DarthJDG
Benim cevabımın çok altında, bu gibi görünüyor. sonunda sabit - Patrick


Cevaplar:


Bu, ilgili bir hata raporu olabilir, oldukça uzun bir süredir var: http://bugs.jqueryui.com/ticket/3740

Test ettiğim her tarayıcıda (Chrome, FF4, IE9) olduğu görülüyor. Bu sorunu çözmek için kullanabileceğiniz birkaç yol var:

1. kullanım position:absolute; senin css içinde. Kesinlikle yerleştirilmiş elemanlar etkilenmiyor gibi görünüyor.

2. Ana öğenin (olayın gövde ise) olduğundan emin olun. overflow:auto; ayarlayın. Testim bu çözümün konumu düzeltdiğini gösterdi, ancak otomatik gezinme işlevselliğini devre dışı bıraktı. Fare tekerini veya ok tuşlarını kullanarak da kaydırma yapabilirsiniz.

3. Yukarıdaki hata raporunda önerilen düzeltmeyi elle uygulayın ve başka sorunlara yol açıyorsa tamamen test edin.

4. Resmi bir düzeltme için bekleyin. Geçmişte birkaç kez ertelenmiş olmasına rağmen jQuery UI 1.9'a planlandı.

5. Her tarayıcıda olduğundan eminseniz, hesaplamaları düzeltmek için bu saldırıları etkilenen sürükleme alanlarının etkinliklerine ekleyebilirsiniz. Test etmek için birçok farklı tarayıcı var, bu yüzden sadece son çare olarak kullanılmalıdır:

$('.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



Bu harika, teşekkürler! (Ayarlar taşma: hemen otomatik olarak düzeltildi. Stili tek tek tablo hücrelerine uyguladım. - Alex
jsfiddle.net/a2hzt/5  overflow-y: html öğesinde kaydırma, bu sorunu firefox'ta (chrome works) de oluşturur, sadece aşağı kaydırıp sürüklemeye çalışın. - digitalPBK
Bu ba-a-ack helper: "clone". bugs.jqueryui.com/ticket/9315  seviye bloker, majör üzerinde bir çentik. tj.vantoll, "1.10.3'e giren 6 sürüklenebilir düzeltme şüpheli olabilir" diyor. Henüz en basit örnek: jsfiddle.net/7AxXE - Bob Stein
Doğrulandı, bu hata içeride jQuery UI 1.10.3 ama değil 1.10.2 - Bob Stein
Sorun da var gibi görünüyor jQuery Kullanıcı Arabirimi 1.10.4. Sadece yapışacağım 1.10.2 şimdilik! - lhan


Bu çözüm, herhangi bir şeyin konumlandırmasını ayarlamadan çalışır, sadece öğeyi klonlarsınız ve onu kesinlikle konumlandırırsınız.

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

Yardımcı, sürüklenecek DOM öğesini döndürmesi gereken bir işlev olabilir.


41
2017-09-28 15:04



+1 Çok teşekkür ederim, bu benim için sıradışı çalışıyor (Ben benzer ama daha az zarif bir şey denemek üzereydim). Yine de $ j ile küçük bir yazım hatası var! :) - Iain Collins
Benim için: drag bununla hiç çalışmaz ve hata döndürür: TypeError: this.offsetParent [0] undefined - ProblemsOfSumit
Bence ui.helper sadece ui değil - Mohammed Joraid
Teşekkürler bana Sortable ile yardım - BG Bruno
Bunu daha az hacky çözümlerinden biri olarak seçip oy verdikten sonra, benim için bir problem yaşadım. position: relative @Josh Bambrick'in keşfettiği gibi - Dominic Tobias


Bu benim için çalıştı:

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



Bu çözüm benim için harika çalıştı. Teşekkürler! - Marc Litchfield
İyi çalıştı! ty - themis
sorunumu çöz, "1.11.0" - Зелёный
@DarthJDG düzeltmesinden ziyade jquery 1.10.2 üzerinde mükemmel çalışma - Andry Yosua
Bu komik bir çözümdür, ancak yalnızca hatayı (Chrome) içeren tarayıcılarda çalışır. Bugüne sahip olmayan tarayıcılar artık buna sahip olacak ama tersine dönecek :) - manu


Bu böcek çok sık gelir gibi görünüyor ve her defasında farklı bir çözüm var. Yukarıdakilerin hiçbiri ya da internette bulduğum başka hiçbir şey işe yaramadı. JQuery 1.9.1 ve Jquery UI 1.10.3 kullanıyorum. Bunu nasıl çözdüm:

$(".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();
  }
});

FF, IE, Chrome'da çalışıyor, henüz diğer tarayıcılarda test etmedim.


7
2018-06-04 06:22



Bu benim için çalıştı, dışında ui.position.top yerine ui.offset.top kullanmak zorunda kaldı - c.dunlap


Başka bir cevap yazdığım için üzgünüm. Yukarıdaki yanıttaki çözümlerin hiçbiri benim tarafımdan kullanılamayacağından, çok fazla Google Çalışması yaptım ve başka bir makul çözüm bulmadan önce çok fazla sinir bozucu küçük düzenlemeler yaptım.

Bu sorun ne zaman olursa olsun ortaya çıkıyor herhangi ana öğelerin position 'göreceli' olarak ayarlanmış. İşaretlemeyi yeniden biçimlendirmek ve CSS'mi değiştirmek zorunda kaldım, ancak bu özelliği tüm ebeveynlerden kaldırmak zorunda kaldım. .sortable()tüm tarayıcılarda düzgün çalışıyor.


6
2017-07-13 17:01



Benim için de aynısı. herhangi position: relative; herhangi bir ebeveynte bunun gerçekleşmesine neden olur. - wojtiku
tamamen katılıyorum! Benim için, vücutta sadece bir inline tarzıydı position: relative; kaldırılması gereken ... sürüklenebilir ve vücut arasındaki ana elemanlar burada sorun yaratmaz gibi görünüyor. - con
omg, teşekkürler, garrr neden insanlar bu gün ve yaşta Dragula kullanmıyorlar - teşekkürler! - Dominic Tobias
Çok teşekkür ederim! Ebeveynin veli pozisyonu: akrabası benim için sebep oldu - wjk2a1


Bu böcek taşındı http://bugs.jqueryui.com/ticket/6817 ve yaklaşık 5 gün önce (16 Aralık 2013 veya bundan sonra) nihayet düzeldi. Şu anda öneri en son geliştirme yapısını kullanmaktır. http://code.jquery.com/ui/jquery-ui-git.js ya da beklemek Bu düzeltmeyi içermesi gereken sürüm 1.10.4.

Düzenle: Bu düzeltme şimdi bir parçası olabilir gibi görünüyor http://bugs.jqueryui.com/ticket/9315 hangi sürüm 1.11'e kadar düşmesi planlanmadı. JQuery'nin yukarıdaki bağlantılı kaynak kontrol sürümünü kullanarak sorunu benim ve @Scott Alexander (aşağıda yorum) düzeltmek gibi görünüyor.


5
2017-12-22 02:04



1.10.4 kullanıyorum ve hata hala var, bu bağlantıyı kullandı ve her şey iyi çalışıyor. - Scott Alexander
@ScottAlexander Düzeltme, düşündüğümden farklı bir bilete bağlanmış olabilir. Cevabımı buna göre düzenledim. Teşekkürler! - Patrick


Taşma işlemini siliyorum:

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

Ve mükemmel çalışıyor!


4
2017-09-27 08:27





Bu hatanın bu kadar uzun süre çözülmemesi dikkat çekici gözüküyor. Benim için Safari ve Chrome (yani web tarayıcıları) ile ilgili bir sorun var, ancak IE7 / 8 / 9'da değil, Firefox'ta da iyi çalışıyor.

Mutlak veya sabit olan, önemli olan veya olmayan ayarların, yardımcı olmadığımı fark ettim. Sonunda sürükleme işleyici işlevime bir satır ekledim:

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

Bu satırı web grubuna özgü hale getirmeyi beklemekteydim ama merakla her yerde iyi çalıştı. (Kısa bir süre sonra "hayır, aslında diğer tüm tarayıcıları karıştırdı" diyerek bir yorum bekliyorum.)


3
2017-08-15 11:21



Bu çalışır, ancak sürüklerken kaydırdığınızda, hala y konumunu değiştirir. DarthJDG'nin 5 numaralı çözümü, sürüklerken kaydırma yaparken de çalışır. - mirelon


Yaptığım şey:

$("#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