شرح عمل مربع قابل للإزاحة DRAGGABLE بإستعمال DRAGGABILLY.JS

شرح عمل مربع قابل للإزاحة DRAGGABLE بإستعمال DRAGGABILLY.JS


شرح عمل مربع قابل للإزاحة DRAGGABLE
السلام عليكم ورحمة الله تعالى وبركاته أهلا ومرحبا بكم, في هذا الدرس سنرى بإذن الله شرح لكيفية عمل مربع أو box قابل للإزاحة Draggable.
في الحقيقة هذه إضافة رائعة لموقعك حيث أنك تجعل زائر الموقع يحدد بنفسه الترتيب المناسب لمحتوى الموقع, وهذه خاصية إيجابية جدا أليس كذلك… ؟ دعونا نبدأ في الدرس دون إطالة…
هنا مثال على ما ستحصل عليه بعد إتباع الدرس
موقع إضافة jQuery التي سنتعملها من هنا Draggabilly.Js يمكنك زيارته لترى بعض الأمثلة التي يمكنك إستعمالها في موقعك…
سأحاول أن أعطيك أبسط تطبيق لإضافة Draggabilly.Js, وبعد أن يعمل التطبيق بشكل جيد يمكنك الدخول إلى الموقع الرسمي للإضافة و العمل على التعديلات الأخرى.
أولا نقوم بعمل إستايل للمربع الذي سنعمل عليه أو الذي سيصبح قابل للإزاحة, و هذا إستايل مختصر قمت بعمله
01
02
03
04
05
06
07
08
09
10
11
12
<style type="text/css">
  #demo{
    margin: 30px;
    padding: 30px;
    background: green;
    border-radius: 5px;
    width: 200px;
    color: #fff;
    text-align: right;
    cursor: move;
  }
</style>
بعد ذلك قم بعمل المربع الدي سيطبق عليه الإستايل, سيكون كالتالي
1
2
3
<div id="demo">
   إضغط ثم حرك
</div> 
وأخيرا قم بإدخال إضافة Draggabilly.Js و تحديد أي دي المربع الذي تريده أن يكون قابل للإزاحة. طبعا في حالتنا الأي دي هو demo,إذا الكود سيكون كالتالي
1
2
3
4
5
6
7
8
9
<script
  src="http://draggabilly.desandro.com/draggabilly.pkgd.min.js"
  type="text/javascript">
</script>
<script type="text/javascript">
var elem = document.querySelector('#demo');
var draggie = new Draggabilly('#demo');
</script>
الكود المحصل عليه في النهاية يكون كالتالي
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<style type="text/css">
  #demo{
    margin: 30px;
    padding: 30px;
    background: green;
    border-radius: 5px;
    width: 200px;
    color: #fff;
    text-align: right;
    cursor: move;
  }
</style>
<div id="demo">
   إضغط ثم حرك
</div>
<script
  src="http://draggabilly.desandro.com/draggabilly.pkgd.min.js"
  type="text/javascript">
</script>
<script type="text/javascript">
var elem = document.querySelector('#demo'); 
var draggie = new Draggabilly('#demo'); 
</script>

شارك الموضوع

إقرأ أيضًا