[ 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;
}



إضغط ثم حرك






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







أكثر...