كيفية إعادة ترتيب صف من حقول إدخال HTML دون الدخول إلى AJAX

Question

أقوم بإنشاء مجموعة من الصفوف من حقول نص إدخال HTML، والتي أريد أن يتمكن المستخدمون النهائيون من إعادة ترتيبها.لا أرغب في استخدام AJAX، لكني أوافق على استخدام Javascript.

أنا بخير مع وجود بعض أزرار الأسهم على جانب كل صف، والتي عند الضغط عليها تحرك الحقول لأعلى ولأسفل.

مشكلتي مع AJAX هي أنها ثقيلة جدًا (50-60 كيلو بايت) بالنسبة لهذه الوظيفة فقط.لقد ألقيت نظرة على بعض أكواد Yahoo (YUI)، ولكن مرة أخرى، يبدو الأمر مبالغًا فيه بالنسبة لوظيفة معينة.لقد وجدت هذا - http://www.danvk.org/wp/dragtable/ - والذي يبدو وكأنه الرمز الأخف، ولكنه يسمح فقط بإعادة ترتيب الأعمدة.

سأعمل على الخيار الأخير، لكنني منفتح على الأفكار/الأساليب الأخرى حول كيفية القيام بذلك (على سبيل المثال، السماح للمستخدم بإعادة ترتيب الحقول حسب الصفوف).

ملاحظة:أفترض أنه ليس مهمًا لهذه المناقشة، ولكني أستخدم PHP لإنشاء حقول نص HTML هذه.

Answer 1

إضافة إلى إجابة يوسف ...

وفق المواصفات الأساسية لـ W3C DOM المستوى 2:

أدخل قبل

يقوم بإدراج العقدة newChild قبل العقدة الفرعية الموجودة refChild....] إذا كان Newchild بالفعل في الشجرة ، فسيتم إزالته لأول مرة.

وبالتالي، ليست هناك حاجة للاتصال removeChild() قبل الاتصال insertChild().

كما أن دعم IE6 DOM سيء للغاية، لذا قد تحتاج إلى كتابة تعليمات برمجية محددة له.أو ربما تفضل عدم إضاعة الوقت في دعم هذا المتصفح و اطلب من المستخدمين الترقية.أو، إذا كنت تريد حقًا دعم IE6، فربما يكون استخدام مكتبة JavaScript (مثل jQuery) حلاً سهلاً.

يحرر: هذا هو الحل النهائي لجافا سكريبت، بناءً على إجابة جوزيف:

function up(row) {
    var prevRow = row.previousSibling;
    if(prevRow) {
        row.parentNode.insertBefore(row, prevRow);
    }
}

Answer 2

يمكنك كتابة دالة جافا سكريبت مشابهة لهذه واحدة

function up(row) {
    var prevRow = row.previousElementSibling;
    if(prevRow != null) {
        row.parentNode.removeChild(row);
        document.body.insertBefore(row, prevRow);
    }
};

واستخدامه في الصفوف مثل هذا:

<p>
    <input type="text"/>
    <a onclick="up(this.parentNode)">Up</a>
</p>

وأنا أتفق معك على أن لا تحتاج حقا إلى مرجع إطار جافا سكريبت لمهمة بسيطة للغاية من هذا القبيل.

Answer 3

ويبدو أنك الخلط. AJAX هو مصطلح عام يشير إلى استخدام جافا سكريبت لتحميل المحتوى الإضافي من خادم عن طريق طلبات الفرعية في الواقع دون تحميل صفحة جديدة. هناك العديد من المكتبات جافا سكريبت المختلفة التي يمكن التعامل مع طلبات AJAX.

وربما كنت تفكر في واحدة من المكتبات أكثر شعبية مثل مسج عندما تقول "أجاكس"؟

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