واجهة المستخدم مسج:أخطاء قابلة للفرز متداخلة

Question

شكرا للقراءة.

مسألتان:

أقوم بإنشاء نظام من نوع قائمة المهام، والذي سيستخدم قوائم متداخلة قابلة للفرز.

إليك بعض التعليمات البرمجية التجريبية الأساسية جدًا:

<script>
    $(function(){

        $('.sortable_test > li').attr('style', 'border:1px solid red; padding:3px; margin:2px;');

        $('.sortable_test').sortable({
            distance: 5,
            connectWith: ['.sortable_test'],
            placeholder: 'ui-state-highlight',
            forcePlaceholderSize: true
        });
    })
</script>
<ul class='sortable_test'>

    <li>
        Item
        <ul class='sortable_test'>

            <li>
                Item

            </li>
            <li>
                Item
            </li>
            <li>
                Item
            </li>
            <li>
                Item
            </li>
            <li>
                Item
            </li>
            <li>
                Item
            </li>
            <li>
                Item
            </li>
        </ul>
    </li>
    <li>
        Item
    </li>
    <li>
        Item
    </li>
    <li>
        Item
    </li>
    <li>
        Item
    </li>
    <li>
        Item
    </li>
    <li>
        Item
    </li>
</ul>

العدد 1:

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

ومع ذلك، إذا كنت تريد سحب عنصر من القائمة الفرعية إلى القائمة الرئيسية، أو العكس، فيمكن القيام بذلك، ولكن لن يظهر العنصر النائب على الفور، وسيحاول الاحتفاظ به في نفس القائمة.يجب عليك سحبه في كل مكان، قبل أن يتم تسجيله في القائمة التي انتهيت منها.

في النهاية، يبدو أنك تدرك أنك تريد الدخول إلى قائمة فرعية أو الخروج منها، لكن الأمر متشنج للغاية.

أعتقد أنه ربما يكون الأمر مرتبكًا فيما يتعلق بالقائمة التي لها الأسبقية، نظرًا لأنك تقوم بالسحب، من الناحية الفنية، على كليهما.

لذا، إذا حاولت سحب عنصر من القائمة الرئيسية إلى قائمة فرعية، فسوف يعتبر القائمة الفرعية بأكملها عنصرًا واحدًا ويحاول التحرك فوقها على هذا النحو.

وقد واجه أي شخص هذا؟هل لديك أي أفكار؟ربما تكون هناك طريقة لتحديد القائمة التي لها الأسبقية، أو جعلها أكثر وضوحًا للمكون الإضافي، ما هي القائمة التي تهتم بها؟

العدد 2:

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

يبدو أن المشكلة تتعلق بسحب عنصر بارتفاع كبير.

المتصفحات:

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

شكرًا!

Answer 1

تحقق من هذا الخطأ: http://dev.jqueryui.com/ticket/4333

Answer 2

أواجه مشكلات مماثلة وأرسلت أيضًا خطأً إلى JQuery UI ونشرته هنا.لدي عرض توضيحي حيث استخدمت بضعة خيارات إضافية قابلة للفرز ويبدو أنها تعمل بشكل جيد في IE ولكن لا يمكنك السحب من القوائم المتداخلة في FF.

$(".myList").sortable({ connectWith: ".myList", appendTo: 'body', helper: 'clone', items: 'li' });

Answer 3

آسف لإحياء هذا الموضوع.أردت فقط النشر للمستخدمين الآخرين الذين يتعثرون في هذا الموضوع.

أواجه نفس مشكلات Eli تمامًا - باستخدام Chrome 8.x.

Eli -- لحل المشكلة 2، قمت بإزالة فئة "myList" من جميع القوائم الفرعية للعنصر الذي يتم سحبه.أقوم بتغييره إلى "mySubList" ثم اتصل بـ .sortable('refresh') على عنصر القائمة الذي يتم سحبه.وأخيرًا، قمت بتغييره مرة أخرى بمجرد اكتمال السحب (واستدعاء التحديث مرة أخرى).يؤدي ذلك إلى منع وضع العنصر الأصلي في إحدى القوائم الفرعية الخاصة به والتسبب في حدوث الخطأ.لا يمكنك الاتصال بـsortable('refresh') في حدث البداية للفرز (لم ينجح الأمر بالنسبة لي على أي حال)، لذا يتعين عليك إنشاء حدث "click" الخاص بك والذي يقوم بكل هذا العمل قبل الأحداث القابلة للفرز بدء إطلاق النار.

لدي مقبض، لذلك أقوم بكل هذا العمل عندما ينقر المستخدم على المقبض.

الكود (لم يتم تجربته ولكنك ستصلك الفكرة حتى لو لم تنجح):

$('.sortable_test').sortable({
   distance: 5,
   connectWith: ['.sortable_test'],
   placeholder: 'ui-state-highlight',
   forcePlaceholderSize: true
}).find('li').click(function() {
   $(last_selected_li).find('.mySubList').removeClass('mySubList').addClass('myList').end().sortable('refresh');
   $(this).find('.myList').removeClass('myList').addClass('mySubList').end().sortable('refresh');
});