jQuery قابل للفرز لإعادة ترتيب عمودين؟

Question

مرحبا جميعا.هنا هو السيناريو.لدي الكود أدناه، وأحتاج إلى إعادة ترتيب العناصر داخل هذه الأعمدة.المشكلة هي... أن العناصر لا تحتاج بالضرورة إلى البقاء داخل العمود الذي تحتوي عليها، بل يجب أن تكون قادرة على التبديل ذهابًا وإيابًا، اعتمادًا على المستخدم.هنا هو نموذج التعليمات البرمجية:

<div id="container">
    <div id="left-col">
        <div class="wrapper">
            <div class="item">
                <h2>Row 1 Column 1</h2>
                <p>Lorem ipsum dolor sit amet</p>
                <p>Lorem ipsum dolor sit amet</p>
                <p>Lorem ipsum dolor sit amet</p>
                <p>Lorem ipsum dolor sit amet</p>
                <p>Lorem ipsum dolor sit amet</p>
            </div>
        </div>
        <div class="wrapper">
            <div class="item">
                <h2>Row 2 Column 1</h2>
                <p>Lorem ipsum dolor sit amet</p>
                <p>Lorem ipsum dolor sit amet</p>
                <p>Lorem ipsum dolor sit amet</p>
            </div>
        </div>
    </div><!-- end left-col -->
    <div id="right-col">
        <div class="wrapper">
            <div class="item">
                <h2>Row 1 Column 2</h2>
                <p>Lorem ipsum dolor sit amet</p>
                <p>Lorem ipsum dolor sit amet</p>
            </div>
        </div>
        <div class="wrapper">   
            <div class="item">
                <h2>Row 2 Column 2</h2>
                <p>Lorem ipsum dolor sit amet</p>
                <p>Lorem ipsum dolor sit amet</p>
                <p>Lorem ipsum dolor sit amet</p>
                <p>Lorem ipsum dolor sit amet</p>
            </div>
        </div>
    </div><!-- end right-col -->
</div>

وCSS المرتبطة بها:

#container {
            border: 1px solid black;
            overflow: hidden;
            margin: auto;
        }
        #container .wrapper {
            width: 100%;
        }
        #container #left-col .item {
            margin: .5em .25em .5em .5em;
            border: 1px solid black;
        }
        #container #right-col .item {
            margin: .5em .5em .5em .25em;
            border: 1px solid black;
        }
        #left-col, #right-col { width: 50%; }
        #left-col { float: left; }
        #right-col { float: right; }
        .item h2 { background: #ccc; }

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

Answer 1

تبين أن هناك حل أسهل.بمساعدة روبرت والروابط التي قدمها، يعمل هذا الحل بشكل جيد:

$(function() {
    $("#left-col").sortable({
        handle: '.item h2',
        connectWith: '#right-col'
    }).disableSelection();
    $("#right-col").sortable({
        handle: '.item h2',
        connectWith: '#left-col'
    }).disableSelection();
});

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

Answer 2

يجب أن يقوم البرنامج المساعد TableSorter بما تحتاجه.إنه يعمل فقط مع الجداول، ولكنه مرن للغاية؛حتى أن لديها معالجة خاصة للأرقام.أستخدمه حاليًا في مشروع أعمل عليه.

http://www.tablesorter.com/

Answer 3

ال واجهة مستخدم مسج قابلة للفرز يجب أن يسمح لك بتحريك العناصر لأعلى ولأسفل داخل العمود:

http://jqueryui.com/demos/sortable/

إنه أمر مربك بعض الشيء لأن موقع jQuery يحتوي أيضًا على ملف قابل للفرز صفحة تحتوي على عرض توضيحي لا يبدو أنه يعمل حاليًا.

قد تحتاج أيضًا إلى واجهة مستخدم jQuery قابلة للإسقاط:

http://jqueryui.com/demos/droppable/

سيسمح لك Droppable بالسحب والإفلات من عمود إلى آخر.إليك الرابط الخاص بـ Droppable على موقع jQuery (يعمل هذا العرض التوضيحي):

http://docs.jquery.com/UI/API/1.7/Droppable

Answer 4

إذا كنت ستتبع حل السحب/الإفلات، com.thredubmedia يحتوي على إصدار أسرع بكثير وأقل تضخمًا من مكتبة jQuery UI.

العرض الخاص بي هو هنا.يمكنك نقل الأسماء بين القوائم ولكن لا يتم فرزها داخل القائمة.يجب أن يكون هذا تغييرًا سهلاً.

Answer 5

يمكنك الحصول على مثال هنا:إنه يحاكي بشكل جميل واجهة iGoogle مع الفرز والإفلات أينما تريد:آي جوجل