عنصر مساعد التمرير القابل للفرز لـ jQuery UI يعوض مشكلة Firefox

Question

لدي مشكلة مع قائمة jQuery UI 1.7.2 القابلة للفرز في Firefox 3.6، IE7-8 تعمل بشكل جيد.عندما قمت بالتمرير لأسفل قليلاً ، يبدو أن عنصر المساعد لديه إزاحة من نفس الارتفاع الذي قمت بالتمرير لأسفل من مؤشر الماوس مما يجعل من المستحيل معرفة العنصر الذي بدأت في السحب في الأصل.كيف يمكنني إصلاح هذا أو حل المشكلة؟إذا لم يكن هناك حل، فما هو المكون الإضافي الجيد والبديل القابل للسحب؟

فيما يلي معلمات التهيئة الخاصة بي للفرز.

$("#sortable").sortable( {placeholder: 'ui-state-highlight'  } );
$("#sortable").disableSelection();

Answer 1

وكنت أشاهده هذه المسألة، وكان قادرا على حلها عن طريق إزالة المغلق حكم موقف: النسبية من واحدة من التي تحتوي على عناصر div على صفحتي. انظر أيضا: HTTP: //forum.jquery.com/topic/sortable-offset-when-element-is-dragged-and-page-scrolled-down-ff

Answer 2

إذا كنت ترغب في منع متصفح استنشاق، وCSS فقط الحل هو تعيين المجاهدين أو نمط الحاوية لoverflow: auto. اذا نظرتم الى المصدر من خلال الحرائق، انها الطريقة مسج يفعل ذلك في حياتهم سبيل المثال .

Answer 3

وعن طريق overflow: auto; لم يكن خيارا بالنسبة لي. وكنت قادرا على تغلب على هذه المشكلة مع هذا معالج الحدث sort:

$(...).sortable({
    ...
    sort: function(event, ui) {
        var $target = $(event.target);
        if (!/html|body/i.test($target.offsetParent()[0].tagName)) {
            var top = event.pageY - $target.offsetParent().offset().top - (ui.helper.outerHeight(true) / 2);
            ui.helper.css({'top' : top + 'px'});
        }
    },
    ...
});

وأنها ليست مثالية، ولكنها لا تتطلب متصفح استنشاق. اختبار في IE8، والكروم وفايرفوكس.

تعديل : لهذا تستخدم مسج 1.10.0 ومسج UI 1.10.3

Answer 4

وكما أتيحت لي هذه المشكلة وثابتة مع التعليمات البرمجية التالية:

var wscrolltop = 0;
$sortable_elements.sortable({ 
    start: function(event, ui) {
        wscrolltop = $(window).scrollTop();
    },
    sort: function(event, ui) {                   
        ui.helper.css({'top' : ui.position.top + wscrolltop + 'px'});
    }
});

واكتشفت أن ما زال هناك مشكلة إذا كنت انتقل مع الخاص بك للفرز عنصر. ربما شخص ما لديه حل لهذا؟

وUPDATE: الإصلاح هو:

$sortable_elements.sortable({ 
    connectWith: '#personal-favs ul.fitems',
    sort: function(event, ui) {  
        ui.helper.css({'top' : ui.position.top + $(window).scrollTop() + 'px'});
    }
});

ولكن لا يزال - إذا كنت على وشك الخروج من القائمة، يبدو هذا النوع الحدث لوقف

Answer 5

وتحتاج أيضا إلى حساب لحقيقة هذا هو محددة لفايرفوكس، وهنا هو مقتطف أنا باستخدام - حصلت على توجيه الطريق الصحيح من حل هاريس. واجهت هذه المشكلة ث / س باستخدام المساعد عندما كان للفرز في وعاء وضع نسبيا.

  var options = { 
   handle: '.mover', 
   update:updateSorting 
 };
  var userAgent = navigator.userAgent.toLowerCase();
  if(userAgent.match(/firefox/)) {
    options["start"] = function (event, ui) { ui.item.css('margin-top', $(window).scrollTop() ); };
    options["beforeStop"] = function (event, ui) { ui.item.css('margin-top', 0 ); };
  }
  $("#" + list_id+"").sortable(options);
  $("#" + list_id+"").disableSelection();

ويمكنك أيضا أن تفعل هذا الاختيار على الملقم ثم على 2 المكالمات مختلفة اعتمادا على المتصفح.

Answer 6

وتمكنت من معرفة إصلاح لهذه:

$( "items" ).sortable({
start: function (event, ui) {
 if( ui.helper !== undefined )
  ui.helper.css('position','absolute').css('margin-top', $(window).scrollTop() );
},
beforeStop: function (event, ui) {
 if( ui.offset !== undefined )
  ui.helper.css('margin-top', 0);
},
placeholder: 'placeholder-class'
});

وأساسا، كنت بحاجة للاستماع للللفرز "بداية" الحدث لإضافة قيمة المتصفح الحالية scrollTop () لموقف مساعد، ثم كنت بحاجة للاستماع لللفرز في الحدث "beforeStop"، لإزالة هذا تعويض قبل يتم وضع البند رسميا العودة الى القائمة في موقعها الجديد.

والأمل هذا مفيدة لشخص ما!

Answer 7

وI قوة التمرير على موقعي حتى حدوث هذه المشكلة تعويض تمرير بسبب وجود html { overflow-y: scroll } في بلدي CSS.

وكما أنتقل للتمرير وخارجها، وأنا استخدم التالية للحصول على من حوله. لقد اختبرت ذلك فقط في IE8، FF12 وكروم ...

  turnSortingOnOff:function(e) {
    e.preventDefault();

    if (stopOrdering()) {
      // get rid of the hacky css on the html element
      $('html').css({ 'overflow-y': '' });
      $('html').css({ 'margin-right': '' });

      elmt.sortable('disable');
    }
    else if (startOrdering()) {
      // if the body is smaller than the window
      // then there aren't any scrollbars
      // in which case, add a right hand margin of 16px
      // to the html to prevent the site wobbling
      if ($('body').outerHeight() <= $(window).height()) {
        $('html').css({ 'margin-right': 16 });
      }

      // then override the { overflow-y: scroll }
      // in the css by setting it to a nice, safe inherit
      $('html').css({ 'overflow-y': 'inherit' });

      elmt.sortable('enable');
    }
  }

من الواضح انها ليست من الرصاص - إذا تغير حجم المستند أثناء الفرز ثم أشياء أخرى سوف يتعين القيام به. ومع ذلك، في تجربتي يبدو أقل غريب في ظل هذه الظروف.

Answer 8

لقد قمت "بإصلاح" هذا باستخدام إصدارات jQuery/jQuery UI الأحدث.

• مسج 1.8.0
• واجهة المستخدم مسج 1.8.23

Answer 9

ووضع overflow: auto يجعل فايرفوكس بدء السحب مع عنصر تحت المؤشر، ولكن كما يمنع التمرير التلقائي من العمل بشكل صحيح. يمكنك أن ترى أن الحق في المثال مسج قابل للفرز، إذا قمت بإجراء ما يكفي نافذة صغيرة أن هناك حاجة إلى التمرير.

وكان لي overflow: scroll على علامة HTML، ولكن حتى إزالة هذا و(على ما أظن) لم كل العناصر التي تحتوي على النسبية لن يحل المشكلة تماما (أي السحب يبدأ صحيح والتمرير التلقائي يعمل). كما أنني حاولت التصحيح استنشاق موزيلا _findRelativeOffset (أعتقد أنه كان عليه)، لكنه لم يفعل مساعدة.

وماذا فعل مساعدة لحالة استخدامي كان مجرد سحب مع استنساخ (helper: 'clone' في منشئ القابل للسحب). لجعلها تبدو وكأنها كانت استنساخ يست هناك، وأضاف أن أبدأ وطرق التوقف أن مجرد تعيين visibilty أن المخفية ومن ثم العودة.

وكنت قد علق أعلاه، ولكن ليس لدي نقاط حتى الان.

Answer 10

وكان نفس المشكلة. في حالتي واسنت الممكن استخدام "تجاوز: السيارات" -fix. لذلك هذا هو ما فعلته.

var pos_fixed = 1;        // switch variable (the fix should only be fired ones)
$('.drag').draggable({
 start: function(event, ui){
  pos_fixed = 0;            // we're about to start, set to not fixed yet
 },
 drag: function(event, ui){
  if(pos_fixed == 0){       // check if the fix hasn't been fired for this instance yet
   var help_pos = $(ui.helper).offset().top, // get helpers offset
   targ_pos = $(event.target).offset().top,  // get targets(the dragged elements) offset
   marg = targ_pos-help_pos; // calculate the margin the helper has to have to put it on the same y-position as our target
   $(ui.helper).css('margin-top', marg); // put our helper on the same y-position as the target
   pos_fixed = 1;            // we've fixed it, we don't want it to fire again
  }
 }
});

والإصلاح لا يهمه ما المتصفح الذي تستخدمه. وسوف دائما التأكد من أن المساعد له نفس ذ تعويض كهدف عندما يبدأ السحب.

Answer 11

لقراء المستقبل مع هذه المشكلة. أنا ورفع مستواها من jqueryui 1.8 إلى 1.10.3 وتم حل المشكلة مع عدم وجود إصلاحات المغلق.

http://jqueryui.com/

وأنا أيضا ترقية من مسج 1.8 إلى 1.10.2

http://jquery.com/

Answer 12

بالنسبة للقراء المستقبليين ، واجهت مشكلة مماثلة حيث يكون لعنصر المساعد إزاحة عند السحب داخل Div تم تمريره في مربع حوار bootstrap.عند تحرير الكائن المسحوب، ترسل الرسوم المتحركة العنصر المساعد المسحوب نحو موضعه الجديد دون النظر إلى الجزء الذي تم تمريره من الصفحة، مما يعطي تعليقات مربكة للمستخدمين.

من أجل الحفاظ على عمل الأشياء مع الموضع: النسبي وتجاوز السعة y: تلقائي في حاوية الحوار، كان الحل هو

1- أضف إزاحة التمرير () إلى الهامش العلوي للكائن المساعد في حدث بدء الفرز؛

2- قم بإزالة الهامش العلوي في حدث beforeStop

أدى هذا إلى إصلاح الرسوم المتحركة من التوقف بعد السحب، ولكن يتم دفع الكائن المساعد أسفل المؤشر أثناء السحب في الجزء الذي تم تمريره في الصفحة.الإصلاح الأخير هو

3- حساب وتعيين الخاصية العليا للكائن المساعد أثناء السحب (باستخدام حدث الفرز) بالنسبة للمؤشر وإزاحة الحاوية.

$(...).sortable({
...
start: function (event, ui) {  
    ui.helper.css('margin-top', $("#mybootstrap-dialog").scrollTop()); 
},
beforeStop: function (event, ui){ 
    ui.helper.css('margin-top',0); 
},
sort: function(event, ui) {
    var top = event.clientY - $('#my-sortable-ul').offset().top  -  $("#mybootstrap-dialog").scrollTop();
    ui.helper.css({'top' : top + 'px'});
    }
},
...

});

مساعدة هذا يساعد

Answer 13

لتلخيص ما تبذلونه من جهود وتوفر حلا الانتهاء. وفيما يلي بدا العمل للكروم وفايرفوكس 40+ 30 +

var isFirefox = /firefox/.test(navigator.userAgent.toLowerCase());
$('#target').sortable({
    connectWith: '#target-holder .elements',
    handle: ".element-header",
    start: function(ev, ui) {
        if( isFirefox ) {
            ui.item.css('margin-top', $(window).scrollTop() );
        }
    },
    sort: function(ev, ui) {
        if( isFirefox) {
            ui.helper.css({'top' : ui.position.top - $(window).scrollTop() + 'px'});
        } else {
            ui.helper.css({'top' : ui.position.top + $(window).scrollTop() + 'px'});
        }
    },
    beforeStop: function (ev, ui) {
        if( isFirefox ) {
            ui.item.css('margin-top', 0 );
        }
    }
});

Answer 14

وحل بلدي: ".sortable" لإضافة "الموقف: النسبية"

$(".sortable").sortable({
      sort: function(event, ui) {
           ui.position.top = ui.position.top + $(window).scrollTop();
      },
});

وPS تستخدم مسج UI 1.12.0 ومسج 2.2.4

Answer 15

sort: function(e, ui){
        var tempVariable = $(ui.item.get(0));
        tempVariable.css('top', (e.clientY)-(tempVariable.css("height").replace("px", "")));
    }