पेज स्क्रॉल किए जाने के बाद jQuery ड्रैगजेबल गलत जगह पर सहायक दिखाता है

Question 1

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

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

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

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

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

किसी भी विचार मैं इसे ठीक करने के लिए क्या कर सकता हूं?

Question 2

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

ऐसा लगता है कि मेरे द्वारा परीक्षण किए गए प्रत्येक ब्राउज़र पर (Chrome, FF4, IE9)। इस मुद्दे पर काम करने के कुछ तरीके हैं:

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

Question 3

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

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

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

Question 4

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

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

Question 5

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

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

Question 6

ऐसा लग रहा है कि यह बग बहुत बार आता है, और हर बार एक अलग समाधान होता है। उपरोक्त में से कोई भी, या कुछ और जो मैंने इंटरनेट पर पाया, काम किया। मैं jQuery 1.9.1 और Jquery UI 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();
  }
});

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

Question 7

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

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

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

Question 8

यह बग 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 के उपरोक्त लिंक किए गए स्रोत नियंत्रण संस्करण का उपयोग करने से मुझे और @ सिककोट (नीचे टिप्पणी) के लिए समस्या ठीक होती है।

Question 9

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

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

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

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

Question 10

मैंने क्या किया है:

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

Question 11

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

(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 साल पुरानी बग को ठीक किया जा सकता है: /)

Question 12

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

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

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

Question 13

समस्या पर मैंने जो कुछ भी पढ़ा है, उसे अपनाने के बाद मेरे लिए यही काम आया।

$(this).draggable({
  ...
  start: function (event, ui) {
    $(this).data("scrollposTop", $('#elementThatScrolls').scrollTop();
    $(this).data("scrollposLeft", $('#elementThatScrolls').scrollLeft();
  },
  drag: function (event, ui) {
    ui.position.top += $('#elementThatScrolls').scrollTop();
    ui.position.left += $('#elementThatScrolls').scrollLeft();
  },
  ...
});

* elementTcScrolls अतिप्रवाह के साथ माता-पिता या पूर्वज है: ऑटो;

स्क्रॉलिंग पोजिशन की स्थिति को काम करता है और हर बार जब उसे स्थानांतरित किया जाता है / खींचा जाता है तो वह हेल्पर की स्थिति में जुड़ जाता है।

आशा है कि किसी की मदद करता है, के रूप में मैं इस पर प्रमुख समय बर्बाद किया।

Question 14

यह स्थिति का उपयोग करने की आवश्यकता के बिना समाधान करने के लिए लगता है: माता-पिता में पूर्ण :)

$("body").draggable({
     drag: function(event, ui) { 
         return false; 
     } 
});

Question 15

मैं एक ही मुद्दे को जोड़ने के साथ ठीक करने में कामयाब रहा display: inline-block को घसीट आइटम में

जोड़ना position: relativeमेरे लिए काम नहीं कर रहा था (jQuery इसके साथ ओवरराइड करता हैposition: absolute ड्रैग स्टार्ट पर )

उपयोग किए गए jQuery संस्करण:

jQuery - 1.7.2
jQuery UI - 1.11.4

Question 16

मुझे भी यही समस्या थी और पाया गया कि यह सब बूटस्ट्रैप नौबेर "नेवबर-फिक्स्ड-टॉप" क्लास की वजह से था, जो कि नियत स्थान पर था, जो कि मेरे <body>60px से <html>ऊपर से नीचे चला गया था । इसलिए जब मैं अपनी साइट में ड्रैग करने योग्य प्रपत्रों को ले जा रहा था, तो कर्सर 60px रूप में दिखाई दिया।

आप देख सकते हैं कि Chrome डीबगिंग टूल में, एलिमेंट्स इंटरफेस में, <body>टैग पर क्लिक करें और आपको टॉप और बॉडी के बीच एक गैप दिखाई देगा।

चूंकि मैं अपने सभी अनुप्रयोगों में इस नावबार का उपयोग कर रहा हूं और प्रत्येक फॉर्म के लिए (डैर्थजेडजी की प्रक्रिया के अनुसार) ड्रैग करने के लिए अपनी इनिशियल कॉल को संशोधित नहीं करना चाहता था। मैंने इस तरह से ड्रैग करने योग्य विजेट का विस्तार करने का फैसला किया और बस अपने ड्रैग करने योग्य इनिशियलाइज़ेशन में एक yOffset जोड़ें।

(function($) {
  $.widget("my-ui.draggable", $.ui.draggable, {
    _mouseDrag: function(event, noPropagation) {

      //Compute the helpers position
      this.position = this._generatePosition(event);
      this.positionAbs = this._convertPositionTo("absolute");

      //Call plugins and callbacks and use the resulting position if something is returned
      if (!noPropagation) {
        var ui = this._uiHash();
        if(this._trigger('drag', event, ui) === false) {
          this._mouseUp({});
          return false;
        }
        this.position = ui.position;
      }
      // Modification here we add yoffset in options and calculation
      var yOffset = ("yOffset" in this.options) ? this.options.yOffset : 0;

      if(!this.options.axis || this.options.axis != "y") this.helper[0].style.left = this.position.left+'px';
      if(!this.options.axis || this.options.axis != "x") this.helper[0].style.top = this.position.top-yOffset+'px';
      if($.ui.ddmanager) $.ui.ddmanager.drag(this, event);

      return false;
    }
  });
})(jQuery);

अब जब मैं बूटस्ट्रैप नेवबार का उपयोग करके साइट में ड्रैग करने योग्य तत्व / फॉर्म को इनिशियलाइज़ करता हूं:

// Make the edit forms draggable
$("#org_account_pop").draggable({handle:" .drag_handle", yOffset: 60});

बेशक, आपको अपनी साइट के अनुसार सही yOffset निर्धारित करने के लिए प्रयोग करना होगा।

वैसे भी डार्थजेडीजी को धन्यवाद जिन्होंने मुझे सही दिशा बताई। चियर्स!

Question 17

मैंने jQueryUi ड्रैगेबल का उपयोग करना छोड़ दिया और jquery.even.drag नामक एक बेहतर प्लगइन का उपयोग करने के लिए चला गया , बहुत छोटा कोड आकार, बिना सभी बकवास jQueryUI के।

मैंने एक कंटेनर के अंदर इस प्लगइन का उपयोग करके एक डेमो पेज बनाया है जिसमें स्थिति है: निश्चित

डेमो

आशा है कि यह किसी की मदद करता है, क्योंकि यह समस्या BIG है।

Question 18

मैं इसी तरह की समस्या थी, केवल विशेष रूप से IE 10 विंडोज 8 पर चल रहा था। अन्य सभी ब्राउज़रों ने ठीक काम किया। कर्सर हटाना: {शीर्ष: 0} समस्या हल हो गई।

Question 19

मैंने यहां विभिन्न उत्तरों की कोशिश की, जिसमें jQuery को अपडेट करना शामिल है और पाया कि यह मेरे लिए काम करता है। मैंने नवीनतम क्रोम और IE पर इसका परीक्षण किया। मुझे लगता है कि यह आपके यूआई लेआउट के आधार पर विभिन्न समाधानों के साथ एक समस्या होगी।

$('{selector}').draggable({
    start: function(event, ui) {
        ui.position.top -= $(document).scrollTop();
    },
    drag: function(event, ui) {
        ui.position.top -= $(document).scrollTop();
    }
});

Question 20

कर्सर स्थिति क्यों नहीं? मैं सॉर्ट करने योग्य प्लगइन का उपयोग कर रहा हूं और मैं इसे इस कोड के साथ ठीक करता हूं:

sort: function(e, ui) {
    $(".ui-sortable-handle.ui-sortable-helper").css({'top':e.pageY});
}

Question 21

के appendTo: "body'साथ स्थिति का उपयोग करें और सेट करें cursorAt। यह मुझे ठीक काम करता है।

$('.js-tire').draggable
      tolerance: 'fit',
      appendTo: 'body',
      cursor: 'move',
      cursorAt:
        top: 15,
        left: 18
      helper: (event) ->
        $('<div class="tire-icon"></div>').append($('<img src="/images/tyre_32_32.png" />'))
      start: (event, ui) ->
        if $(event.target).hasClass 'in-use'
          $('.js-send-to-maintenance-box').addClass 'is-highlighted'
        else
          $('.ui-droppable').addClass 'is-highlighted'
      stop: (event, ui) ->
        $('.ui-droppable')
          .removeClass 'is-highlighted'
          .removeClass 'is-dragover'

Question 22

मैं शीर्ष पर एक चिपचिपा नौसेना का उपयोग कर रहा हूं और सोचा था कि यही कारण था कि स्क्रॉल समस्या हर किसी को हो रही थी। मैंने कर्सर के साथ हर किसी के विचार की कोशिश की, मैंने रोकथाम की कोशिश की, और कुछ भी काम नहीं किया और सीएसएस में अपने HTML के अतिप्रवाह को परेशान किया! पागल कैसे एक छोटा सीएसएस सब कुछ पेंच होगा। मैंने यही किया है और यह एक आकर्षण की तरह काम करता है:

html {
  overflow-x: unset;
}

body {
  overflow-x: hidden;
}