सवाल jQuery स्क्रैगबल पेज स्क्रॉल के बाद गलत जगह में सहायक दिखाता है


मैं jQuery का उपयोग कर रहा हूँ खींचने योग्य तथा droppable एक कार्य योजना प्रणाली के लिए मैं विकास कर रहा हूँ। उपयोगकर्ता एक अलग दिन या उपयोगकर्ता को नौकरियां खींचते हैं, और फिर डेटा को अजाक्स कॉल का उपयोग करके अपडेट किया जाता है।

सब कुछ ठीक काम करता है, सिवाय जब मैं मुख्य पृष्ठ को स्क्रॉल करता हूं (नौकरियां एक बड़े सप्ताह योजनाकार पर दिखाई देती हैं जो मेरी ब्राउज़र विंडो के नीचे से अधिक है)। यदि मैं यहां खींचने योग्य तत्व को आज़माकर खींचता हूं, तो तत्व मेरे माउस कर्सर के ऊपर दिखाई देता है जैसा कि मैंने नीचे स्क्रॉल किया है .. होवर स्टेटस अभी भी ठीक काम करता है और कार्यक्षमता बैंग पर है लेकिन यह सही नहीं दिखती है।

मैं jQuery 1.6.0 और jQuery यूआई 1.8.12 का उपयोग कर रहा हूँ।

मुझे यकीन है कि मुझे ऑफसेट फ़ंक्शन जोड़ने की ज़रूरत है, लेकिन मुझे नहीं पता कि इसे कहां लागू करना है, या यदि कोई बेहतर तरीका है। ये रहा मेरा .draggable() प्रारंभिक कोड:

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

कोई फर्क नहीं पड़ता कि मैं इसे ठीक करने के लिए क्या कर सकता हूं?


76
2018-04-26 14:31


मूल


क्या आप कुछ काम कर रहे डेमो प्रदान कर सकते हैं - jimy
@jimy यह सभी गतिशील और बहुत सुरक्षित है इसलिए मुझे एक नया नया उदाहरण लिखना होगा; यदि कोई भी त्वरित उत्तर ASAP नहीं करता है तो मैं करूँगा। - Alex
क्या आप अपने सीडीएस गुणों को पोस्ट कर सकते हैं जो आपके ड्रैगगेबल हैं या विरासत में हैं? - DarthJDG
मेरे उत्तर के नीचे बहुत नीचे, ऐसा प्रतीत होता है अंत में तय - Patrick


जवाब:


यह एक संबंधित बग रिपोर्ट हो सकती है, यह काफी समय से आसपास रही है: http://bugs.jqueryui.com/ticket/3740

ऐसा लगता है कि मैंने परीक्षण किए गए प्रत्येक ब्राउज़र (क्रोम, एफएफ 4, आईई 9) पर ऐसा प्रतीत होता है। इस मुद्दे के आसपास आप कुछ तरीकों से काम कर सकते हैं:

1। उपयोग position:absolute; आपके सीएसएस में बिल्कुल तैनात तत्व प्रभावित नहीं होते हैं।

2। सुनिश्चित करें कि मूल तत्व (घटना यदि यह शरीर है) है overflow:auto; सेट। मेरे परीक्षण से पता चला कि यह समाधान स्थिति को हल करता है, लेकिन यह ऑटोस्कोल कार्यक्षमता को अक्षम करता है। आप अभी भी मूसहेल या तीर कुंजी का उपयोग कर स्क्रॉल कर सकते हैं।

3। ऊपर दिए गए बग रिपोर्ट में मैन्युअल रूप से सुझाए गए फिक्स को लागू करें और अगर यह अन्य समस्याओं का कारण बनता है तो परीक्षण करें।

4। एक आधिकारिक फिक्स के लिए प्रतीक्षा करें। यह jQuery UI 1.9 के लिए निर्धारित है, हालांकि इसे अतीत में कुछ बार स्थगित कर दिया गया है।

5। यदि आपको विश्वास है कि यह हर ब्राउज़र पर होता है, तो आप इन हैक को गणना को सही करने के लिए प्रभावित ड्रैगगेबल्स की घटनाओं में डाल सकते हैं। यद्यपि परीक्षण करने के लिए यह कई अलग-अलग ब्राउज़र हैं, इसलिए इसे केवल अंतिम उपाय के रूप में उपयोग किया जाना चाहिए:

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



बहुत अच्छा, धन्यवाद! (सेटिंग्स ओवरफ्लो: ऑटो ने तुरंत इसे ठीक कर दिया। मैंने शैली को अलग-अलग टेबल कक्षों पर लागू किया। - Alex
jsfiddle.net/a2hzt/5  ओवरफ्लो-वाई: एचटीएमएल तत्व पर स्क्रॉल भी इस समस्या को फ़ायरफ़ॉक्स (क्रोम वर्क्स) पर बनाता है, बस नीचे स्क्रॉल करें और खींचने का प्रयास करें। - digitalPBK
यह बीए-ए-एक है, के लिए helper: "clone"। bugs.jqueryui.com/ticket/9315स्तर अवरोधक, प्रमुख से ऊपर एक पायदान। tj.vantoll कहते हैं "6 ड्रैगगेबल फिक्स जो 1.10.3 में उतरा है, संदेह हो सकता है।" अभी तक सरल उदाहरण: jsfiddle.net/7AxXE - Bob Stein
पुष्टि की, यह बग अंदर है jQuery यूआई 1.10.3 लेकिन 1.10.2 नहीं - Bob Stein
ऐसा लगता है कि समस्या भी मौजूद है jQuery यूआई 1.10.4। मैं बस रहूँगा 1.10.2 अभी के लिए! - lhan


यह समाधान किसी भी चीज की स्थिति को समायोजित किए बिना काम करता है, आप केवल तत्व को क्लोन करते हैं और इसे पूरी तरह से स्थानांतरित करते हैं।

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

सहायक एक ऐसा कार्य हो सकता है जिसे DOM तत्व को खींचने के लिए वापस करने की आवश्यकता होती है।


41
2017-09-28 15:04



+1 बहुत बहुत धन्यवाद, यह मेरे लिए क्रमबद्ध करने के लिए काम करता है (मैं कुछ समान लेकिन कम सुरुचिपूर्ण कोशिश करने वाला था)। हालांकि आपके पास $ j के साथ एक छोटा टाइपो है! :) - Iain Collins
मेरे लिए: ड्रैग इस पर बिल्कुल काम नहीं करता है और त्रुटियों को लौटाता है: TypeError: this.offset parent [0] अपरिभाषित है - ProblemsOfSumit
मुझे लगता है कि यह ui.helper न केवल ui है - Mohammed Joraid
धन्यवाद, सॉर्ट करने योग्य के साथ मेरी मदद करें - BG Bruno
कम हैकी समाधानों में से एक के रूप में इसे वोट देने के बाद मुझे एहसास हुआ कि मेरे लिए समस्या यह थी कि माता-पिता के पास था position: relative @ जोश बामब्रिक की खोज की गई - Dominic Tobias


यह मेरे लिए काम किया:

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



यह समाधान मेरे लिए बहुत अच्छा काम करता है। धन्यवाद! - Marc Litchfield
अच्छा काम किया! Ty - themis
मेरी समस्या ठीक करो, "1.11.0" - Зелёный
@DarthJDG फिक्स के बजाय jquery 1.10.2 पर पूरी तरह से काम करें - Andry Yosua
यह एक मजेदार समाधान है, लेकिन यह केवल उन ब्राउज़रों पर काम करेगा जिनमें बग (क्रोम) है। जिन ब्राउज़रों में बग नहीं है, वे अब इसे उलटा कर देंगे :) - manu


ऐसा लगता है कि यह बग बहुत बार आता है, और हर बार एक अलग समाधान होता है। उपर्युक्त में से कोई भी नहीं, या इंटरनेट पर जो कुछ भी मैंने पाया वह काम करता है। मैं jQuery 1.9.1 और jQuery यूआई 1.10.3 का उपयोग कर रहा हूँ। इस तरह मैंने इसे ठीक किया है:

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

एफएफ, आईई, क्रोम में काम करता है, मैंने अभी तक अन्य ब्राउज़रों में इसका परीक्षण नहीं किया है।


7
2018-06-04 06:22



यह मेरे लिए काम करता है, सिवाय इसके कि मुझे ui.poff.top के बजाय ui.offset.top का उपयोग करना पड़ा - c.dunlap


एक और जवाब लिखने के लिए खेद है। चूंकि उपर्युक्त उत्तर में से किसी भी समाधान का उपयोग मेरे द्वारा नहीं किया जा सकता था, मैंने बहुत सारे गुगलिंग किए और एक और उचित समाधान खोजने से पहले कई निराशाजनक मामूली संपादन किए।

यह समस्या तब भी होती है जब भी कोई मूल तत्वों के पास है position 'रिश्तेदार' पर सेट करें। मुझे अपने मार्कअप को फिर से बदलना पड़ा और मेरे सीएसएस को बदलना पड़ा लेकिन सभी संपत्तियों से इस संपत्ति को हटाकर, मैं प्राप्त करने में सक्षम था .sortable()सभी ब्राउज़रों में ठीक से काम कर रहा है।


6
2017-07-13 17:01



मेरे लिए भी वही। कोई position: relative; किसी भी माता-पिता में ऐसा होने का कारण बनता है। - wojtiku
पूरी तरह से सहमत! मेरे लिए, यह शरीर में सिर्फ एक इनलाइन शैली थी position: relative; जिसे हटाया जाना था .. ड्रैगगेबल और शरीर के बीच मूल तत्व यहां समस्याएं नहीं बनाते हैं .. - con
ओमग यह धन्यवाद था, गर्व क्यों लोग इस दिन और उम्र में ड्रैगूला का उपयोग नहीं कर रहे हैं - धन्यवाद! - Dominic Tobias
आपको बहुत - बहुत धन्यवाद! अभिभावक के माता-पिता की स्थिति: रिश्तेदार ने मेरे लिए इसका कारण बना दिया - wjk2a1


यह बग चले गए http://bugs.jqueryui.com/ticket/6817 और, लगभग 5 दिन पहले (16 दिसंबर, 2013 या उसके बाद) अंततः तय किया गया प्रतीत होता है। अभी सुझाव है कि नवीनतम विकास निर्माण का उपयोग करना है http://code.jquery.com/ui/jquery-ui-git.js या प्रतीक्षा करें संस्करण 1.10.4 जिसमें यह फिक्स होना चाहिए

संपादित करें: ऐसा लगता है कि यह फिक्स अब का हिस्सा हो सकता है http://bugs.jqueryui.com/ticket/9315 जो संस्करण 1.11 तक ड्रॉप करने के लिए निर्धारित नहीं है। JQuery के उपरोक्त लिंक किए गए स्रोत नियंत्रण संस्करण का उपयोग करने से मुझे और @ स्कॉट अलेक्जेंडर (नीचे टिप्पणी) के लिए समस्या ठीक हो रही है।


5
2017-12-22 02:04



मैं 1.10.4 का उपयोग कर रहा हूं और बग अभी भी वहां है, उस लिंक का इस्तेमाल किया गया है और सब ठीक काम कर रहे हैं। - Scott Alexander
@ScottAlexander फिक्स शायद मैंने सोचा था कि एक अलग टिकट से जुड़ा हो सकता है। मैंने इसके आधार पर अपना जवाब संपादित कर लिया है। धन्यवाद! - Patrick


मैं अतिप्रवाह हटाता हूं:

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

और यह पूरी तरह से काम करता है!


4
2017-09-27 08:27





यह उल्लेखनीय लगता है कि यह बग इतनी लंबी हो गई होनी चाहिए। मेरे लिए यह सफारी और क्रोम (यानी वेबकिट ब्राउज़र) पर एक समस्या है, लेकिन आईई 7/8/9 पर नहीं और न ही फ़ायरफ़ॉक्स पर जो सभी ठीक काम करते हैं।

मैंने पाया कि पूर्ण या निश्चित, बिना या बिना! महत्वपूर्ण, अंत में मदद नहीं की, मैंने अपने ड्रैग हैंडलर फ़ंक्शन में एक पंक्ति जोड़ा:

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

मुझे उस लाइन को वेबकिट-विशिष्ट बनाने की आवश्यकता थी, लेकिन उत्सुकता से यह हर जगह ठीक काम करता था। (जल्द ही मुझसे एक टिप्पणी की उम्मीद है 'एर नो, वास्तव में यह सभी अन्य ब्राउज़रों को गड़बड़ कर दिया।')


3
2017-08-15 11:21



यह काम करता है, लेकिन जब आप खींचते समय स्क्रॉल करते हैं, तब भी यह y स्थिति को बदल देता है। ड्रैगिंग करते समय स्क्रॉल करते समय डार्थजेडीजी का समाधान संख्या 5 भी काम करता है। - mirelon


मैंने जो किया है वह है:

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





मुझे पूरी तरह से यकीन नहीं है कि यह हर मामले में काम करेगा लेकिन इस कामकाज ने मैंने उन सभी विभिन्न स्थितियों पर काम किया है जिन्हें मैंने परीक्षण करना था (और जहां यहां दिए गए पिछले प्रस्तावित समाधान और अन्य सभी असफल रहे)

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

(मैंने यह देखने के लिए jQuery.ui ट्रैकर को सबमिट किया कि वे इसके बारे में क्या सोचते हैं .. अगर यह 4 साल पुरानी बग को अंत में सही किया जा सकता है तो अच्छा होगा: /)


1
2017-07-26 10:04





मैं फ़ायरफ़ॉक्स 21.0 पर JQuery draggable का उपयोग कर रहा हूं, और मुझे एक ही समस्या है। कर्सर सहायक छवि के ऊपर एक इंच रहता है। मुझे लगता है कि यह jquery में एक मुद्दा है जिसे अभी भी हल नहीं किया गया है। मुझे इस समस्या का समाधान मिला, जो ड्रैगगेबल की "कर्सर एटी" संपत्ति का उपयोग कर रहा है। मैंने इसे निम्नानुसार उपयोग किया, लेकिन कोई इसकी आवश्यकता के हिसाब से इसे बदल सकता है।

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

ध्यान दें:  यह सभी ब्राउज़रों के लिए लागू होगा, इसलिए इस कोड का उपयोग करने के बाद सही बाएं और शीर्ष स्थितियों को प्राप्त करने के लिए अपने ब्राउज़र को सभी ब्राउज़रों में देखें।


1
2018-06-18 16:05