مرجع API

إليك العقد الكامل لـ sortable: كل ما يمكنك ربطه والاستماع إليه وإسقاطه وتنسيقه، مجموعاً في مكان واحد. اربط ما تحتاجه ونسّق ما تريده — إنه standalone وملائم للـ Signals.

المدخلات

اضبط sortable عبر 13 مدخلات. اربطها مثل أي @Input في Angular.

الاسم	النوع	الافتراضي	الوصف
`hubSortable`مطلوب	`T[] \| FormArray \| WritableSignal<T[]>`	—	البيانات المرتبطة بالحاوية القابلة للترتيب: مصفوفة عادية أو `FormArray` تفاعلي أو إشارة قابلة للكتابة. تبقى متزامنة مع عمليات السحب والإفلات.
`options`	`Options`	—	كائن خيارات SortableJS الكامل. يمكن أيضًا ربط كل خيار من خيارات SortableJS مباشرةً كمُدخل خاص به (مثل `handle` أو `animation` أو `group`).
`autoUpdateArray`	`boolean`	`true`	عند `true` (الافتراضي) يقوم التوجيه بتعديل المصفوفة المرتبطة تلقائيًا بعد كل سحب. اضبطه على `false` للتحكم اليدوي وتحديث المصفوفة بنفسك.
`cloneFunction`	`(item: T) => T`	—	دالة تُستخدم لاستنساخ عنصر عندما تكون المجموعة مهيأة في وضع `pull: 'clone'`.
`container`	`string`	—	محدد CSS للعنصر المتداخل الذي يجب أن يصبح قابلاً للترتيب عندما يغلِّف المضيف القائمة الفعلية.
`group`	`Options['group']`	—	اسم المجموعة أو كائن إعدادها لربط عدة قوائم والتحكم في أيها يمكنه إعطاء العناصر أو استقبالها.
`sort`	`boolean`	—	يفعّل أو يعطّل إعادة ترتيب العناصر داخل القائمة.
`handle`	`string`	—	محدد CSS للعنصر داخل كل بند الذي يبدأ السحب، مع إبقاء البقية تفاعلية.
`draggable`	`string`	—	محدد CSS يقيّد أي العناصر الفرعية يمكن سحبها.
`filter`	`string \| ((event, target, sortable) => boolean)`	—	محدد CSS (أو دالة شرط) يحدد العناصر التي لا يمكن سحبها.
`disabled`	`boolean`	—	يعطّل سلوك الترتيب دون إزالة التوجيه.
`animation`	`number`	—	مدة حركة إعادة الترتيب بالمللي ثانية.
`ghostClass`	`string`	—	فئة CSS المطبَّقة على العنصر النائب الظاهر أثناء السحب.

المخرجات

تفاعل مع ما يفعله sortable — 13 أحداث لربط منطقك بها.

الاسم	النوع	الوصف
`init`	`Sortable`	يُطلق بمجرد إنشاء نسخة SortableJS الأساسية.
`start`	`SortableEvent`	يُطلق عند بدء عملية السحب.
`end`	`SortableEvent`	يُطلق عند انتهاء عملية السحب، بغضّ النظر عن النتيجة.
`add`	`SortableEvent`	يُطلق عند إفلات عنصر في هذه القائمة قادمًا من قائمة أخرى.
`update`	`SortableEvent`	يُطلق عند تغيّر موضع عنصر داخل القائمة نفسها.
`sortEvent`	`SortableEvent`	يُطلق كلما تغيّر ترتيب القائمة (بعد `add` أو `update`).
`remove`	`SortableEvent`	يُطلق عند مغادرة عنصر هذه القائمة باتجاه قائمة أخرى.
`filterEvent`	`SortableEvent`	يُطلق عند محاولة سحب عنصر مُصفّى (غير قابل للسحب).
`change`	`SortableEvent`	يُطلق عند تغيّر القائمة نتيجة عملية إضافة أو إزالة.
`choose`	`SortableEvent`	يُطلق عند اختيار عنصر (الضغط بالمؤشر).
`unchoose`	`SortableEvent`	يُطلق عند إفلات عنصر دون سحبه.
`clone`	`SortableEvent`	يُطلق عند استنساخ عنصر في وضع الاستنساخ.
`move`	`SortableMoveEventPayload`	يُطلق باستمرار أثناء السحب؛ ويمكن لقيمته المُعادة التحكم في السماح بالحركة.

القوالب

لم يتم توثيق أي قوالب بعد.

متغيّرات CSS

لم يتم توثيق أي متغيّرات CSS بعد.

التنسيق والسمات

لم يتم توثيق أي أمثلة تنسيق بعد. سيتضمّن هذا القسم وصفات التخصيص وأمثلة السمات.