[ jquery ] شرح عمل Draggable Box بإستعمال DRAGGABILLY.JS

استراحات زايد الصفحة الرئيسية

		منتدى استراحات زايد > استراحات اخرى > منتدى أخبار المواقع والمنتديات العربية والأجنبية
[ jquery ] شرح عمل Draggable Box بإستعمال DRAGGABILLY.JS

التسجيل

التعليمـــات

المجموعات

:: مهمة في الحضارة الإنسانية (آخر رد :اسماعيل رضا) :: شراء أثاث مستعمل في الرياض (آخر رد :ريم جاسم) :: مميزات فلتر ماء انجليزي الكويت (آخر رد :ريم جاسم) :: صبابين قهوجيين صبابات قهوجيات جدة 0539307706 (آخر رد :ksa ads) :: بناء هناجر تصميم مستودع حديد 0501543950 (آخر رد :ksa ads) :: ارشادات نقل العفش بالرياض (آخر رد :رودى طه) :: متجر المستلزمات المنزل: الوجهة الأمثل للعثور على كل ما تحتاجه لتحقيق منزل أحلامك (آخر رد :raqm1) :: المستلزمات المنزلية: الأناقة في كل قطعة من الأثاث وحتى المباخر (آخر رد :raqm1) :: دليل شامل لاختيار مستلزمات المطبخ المثالية (آخر رد :raqm1) :: العطور كمصدر للإلهام (آخر رد :اسماعيل رضا)

LinkBack

أدوات الموضوع

انواع عرض الموضوع

05-24-2014, 05:40 PM

محروم.كوم

عضو ماسي

بيانات محروم.كوم

رقم العضوية : 503

تاريخ التسجيل : Dec 2007

الجنس : female

علم الدوله : الدوله : United Arab Emirates

المشاركات : 2,100,618

عدد الـنقاط :3341

تقييم المستوى : 2139

[ jquery ] شرح عمل Draggable Box بإستعمال DRAGGABILLY.JS

السلام عليكم ورحمة الله تعالى وبركاته أهلا ومرحبا بكم, في هذا الدرس سنرى بإذن الله شرح لكيفية عمل مربع أو box قابل للإزاحة Draggable.

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

هنا مثال على ما ستحصل عليه بعد إتباع الدرس

موقع إضافة jQuery التي سنتعملها من هنا Draggabilly.Js يمكنك زيارته لترى بعض الأمثلة التي يمكنك إستعمالها في موقعك…

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

أولا نقوم بعمل إستايل للمربع الذي سنعمل عليه أو الذي سيصبح قابل للإزاحة, و هذا إستايل مختصر قمت بعمله

رمز Code:

#demo{
margin: 30px;
padding: 30px;
background: green;
border-radius: 5px;
width: 200px;
color: #fff;
text-align: right;
cursor: move;
}

بعد ذلك قم بعمل المربع الدي سيطبق عليه الإستايل, سيكون كالتالي

رمز Code:

إضغط ثم حرك

وأخيرا قم بإدخال إضافة Draggabilly.Js و تحديد أي دي المربع الذي تريده أن يكون قابل للإزاحة. طبعا في حالتنا الأي دي هو demo,إذا الكود سيكون كالتالي

رمز Code:

الكود المحصل عليه في النهاية يكون كالتالي

رمز Code:

#demo{
margin: 30px;
padding: 30px;
background: green;
border-radius: 5px;
width: 200px;
color: #fff;
text-align: right;
cursor: move;
}

إضغط ثم حرك

المصدر : مدونة ريشة ويب __DEFINE_LIKE_SHARE__

إعلانات عشوائية

تعارف بلاك بيري	صور بلاك بيري	قروبات بلاك بيري	اخبار رياضية	العاب فلاش	اهداءات اغاني للهواتف	نغمات جوال
أغاني	مسلسلات رمضان	مسجات	سوق محروم	سيارات للبيع	ارقام سيارات للبيع	برودكاست

مواقع النشر (المفضلة)

« مطابخ تراست تقدم اسعار مميزة وضمان وخدمة ما بعد البيع | At Startup Morning, Bahrain's entrepreneurs tell policy makers what th »

تعليمات المشاركة

لا تستطيع إضافة مواضيع جديدة

لا تستطيع الرد على المواضيع

لا تستطيع إرفاق ملفات

لا تستطيع تعديل مشاركاتك

BB code is متاحة

الابتسامات متاحة

كود [IMG] متاحة

كود HTML معطلة

Trackbacks are متاحة

Pingbacks are متاحة

Refbacks are متاحة

قوانين المنتدى

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
إتهام NSA بإستغلال ثغرة Heartbleed من أجل التجسس	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	04-13-2014 04:10 PM
[ jquery ] اظهار كلمة السر واخفائها بواسطه checkbox jquery	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	03-05-2014 02:30 PM
[شرح] زيادة عدد النقاط على موقع AddMeFast بإستعمال iMacros	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	02-23-2014 02:40 AM
[ jquery ] برمجة العد التنازلي jQuery	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	02-08-2014 01:30 AM
[ jquery ] إضافة مربع نص بشكل حيوي باستخدام Jquery	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	08-30-2013 08:10 PM

الساعة الآن 09:38 AM

RSS RSS 2.0 XML MAP HTML