Jquery Ui Sortable يعرض صورة مكسورة في IE8

Question

لدي استعلام مجموعة من الصور للفرز، أي.تم تعيين العناصر على img (نظرًا لأنها موجودة في عنصر تحكم علامة تبويب وهي قائمة أفقية، ولا يمكن فرزها في عناصر القائمة، ولا يمكنني تشغيلها)، والتي تعمل بشكل مثالي في كل مكان باستثناء IE8 ( حتى في وضع الامتثال للمعايير)، حيث يعرض العنصر النائب صورة معطلة.هل هناك أي نوع من إعدادات CSS يمكنني استخدامه لجعل العنصر النائب غير مرئي في IE8.لقد حاولت

visibility : hidden;

لقد حاولت وضع

content : url(transparent.gif);

لا يبدو أن له أي تأثير.ما الذي يمكنني فعله لإصلاح هذا؟أي اقتراحات حول كيفية فحص ما يتم عرضه من CSS، كما هو الحال في Dom Explorer (أو ما يسمى في أدوات مطور IE8) لا أستطيع رؤية الصورة لأنه بمجرد أن أترك الماوس يختفي ويختفي Dom يبدو أن Explorer لا يقوم بالتحديث في الوقت الفعلي بالطريقة التي يعمل بها Firebug.

يحرر:هنا المشكلة مكررة http://jsbin.com/irozu

لقد بالغت في تبسيط مثالي، والمشكلة الأخرى هي أن علامة التبويب بأكملها قابلة للتمرير، ويتم التحكم فيها بواسطة شريط التمرير.تغيير

display : inline;

ل

float : left;

لا يعمل لأنه لم يعد لدينا قائمة عناصر قابلة للتمرير.أيضًا لسبب غريب، عندما يكون هناك شريط تمرير وتستخدم "li" بدلاً من "img" كهدف، يتوقف الفرز عن العمل.

المثال المحدث موجود في: http://jsbin.com/ahawi.

Answer 1

حيث يعرض العنصر النائب صورة مكسورة.هل هناك أي نوع من إعدادات CSS يمكنني استخدامه لجعل العنصر النائب غير مرئي في IE8.لقد حاولت

تظهر الصورة المعطلة لأن jQuery UI تنشئ (في حالتك) عنصر IMG دون تعيين سمة src لعنصر نائب.لحل هذه المشكلة:

1. لا تقم بتعيين خيار العنصر النائب أو

2. قم بتغيير فئة .showPlace الخاصة بك إلى شيء من هذا القبيل

   .showPlace {
      margin: 20px;
      overflow: hidden;
      width: 0; height: 0;
   }
   

الكود أعلاه سيخفي محتوى الصورة (غير الموجود)، لكنه سيترك العنصر مرئيًا.

بالمناسبة.في حالة الاختبار الخاصة بي، الإعداد visibility: hidden ل .showPlace عملت أيضا بشكل جيد

Answer 2

إذا كنت لا تريد إظهار عنصر نائب، فتأكد من ذلك لا قم بتعيين العناصر القابلة للفرز placeholder خيار.

لا أرى أي مشكلة في السلوك الافتراضي القابل للفرز في IE8.لقد حاولت إعادة إنشاء ما وصفته في هذا المثال المستضاف: http://jsbin.com/osobu (الصور القابلة للفرز موجودة في علامة التبويب الثالثة.)

سيكون من المفيد تقديم المزيد من التعليمات البرمجية أو مجرد تعديل النموذج الذي قدمته (عبر http://jsbin.com/osobu/edit) من أجل تكرار المشكلة.

يحرر

ردًا على تعليقك، يمكنك فقط تعيين items خيار ل "li" وتم إصلاح المشكلة.أيضا، لا بد لي من استخدامك

#images li { float: left; }

بدلاً من

#images li { display: inline: }

وإلا سيتم إزاحة الصورة أثناء قيامك بسحبها.

هنا هو العرض التوضيحي الثابت: http://jsbin.com/osezu

Answer 3

وأنا ثابت منه وتقليل رمز قليلا جدا.

وكانت المشكلة الرئيسية التي تم وضع DIV للفرز بدلا من UL

ويبدو للعمل فقط بالطريقة التي تريدها: http://jsbin.com/egiwu

Answer 4

ويمكنك أن تحاول: display: none;

Answer 5

إليك الحل آخر:

$('.mysortthings').sortable({
  start: function(event,ui) {
        $('.ui-sortable-placeholder').each( function() {
           this.setAttribute('src','/ico/unipixel.gif'); } );
       }
});

وبعبارة أخرى، تعيين معالج الحدث بداية، الذي يحدد سمة 'src' للIMG نائبا، في أقرب وقت الامور تسير.