Лого SiteHere.ru

Перетаскивание блоков используя jQuery

Перетаскивание блоков используя jQuery

Библиотека jQuery является очень мощной. И в этой статье я расскажу как создать динамические перетаскиваемые блоки с помощью jQuery.

Пример можно увидеть здесь:

Посмотреть примерСкачать



HTML часть

В html создаем два блока, которые потом будем перетаскивать:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="wrap">
    <div style="opacity: 1; cursor: move; left: 825px; top: 472px;" class="dv1">
        <h2 style="cursor: move;" class="handler">Перетащи меня</h2>
        <div class="content">
            текст исчезает при перетаскивании! <br>координаты:(Слева:<strong>944</strong> ,Сверху:<strong>485</strong>)
        </div>
    </div>
    <div style="opacity: 1; cursor: move; left: 634px; top: 181px;" class="dv2">
        <div style="cursor: move;" class="gb">
            <h2 class="handler2">И меня тоже</h2>
            <div class="content2">
                { z-index: 200, прозрачность: 0.9 }
                <br>
                <br>
                <small><strong>Можешь перетаскивать куда угодно!</strong></small>
            </div>
        </div>
    </div>
</div>


CSS часть

А сейчас для этих блоков применим несколько CSS свойств:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
body,html { 
    font-family:Calibri, sans-serif; 
    font-size:12px; 
    height:1000px; 
    line-height:18px; 
}
 
#wrap {	
    margin:0 auto; 
    width:900px;
}
 
p { 
    height:30px; 
}
 
.dv1 { 
    width:200px; 
    background-color:#eff7ff; 
    border:1px solid #96c2f1; 
    position:absolute; 
    left:100px; 
    top:300px; 
}
 
.dv1 h2 { 
    background-color:#b2d3f5; 
    padding:5px; 
    font-family:Georgia, "Times New Roman", Times, serif; 
    font-size:1.0em; 
    text-transform:uppercase; 
    font-weight:bold; 
    color:#3a424a; 
    margin:1px; 
    cursor:move; 
}
 
.dv1 div { 
    padding:5px; 
    margin-bottom:10px; 
}
 
.dv2 { 
    background-color:#f6ebfb; 
    border:1px solid #a36fde; 
    width:550px; 
    position:absolute; 
    cursor:move; 
    left:400px; 
    top:330px; 
}
 
.dv2 h2 { 
    background-color:#eacfe9; 
    letter-spacing:-0.09em; 
    font-size:1.8em; 
    font-weight: bold; 
    padding:15px; 
    margin:1px; 
    color:#241f24; 
    cursor:move; 
}
 
.dv2 .content2 { 
    padding:5px; 
    margin-bottom:10px; 
}


jQuery часть

В самом начале мы подключаем необходимые js-файлы:

1
2
3
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.dragndrop.js"></script>
<script type="text/javascript" src="js/fn.js"></script>

Перетаскивание находится в данной части кода:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var dragndrop = {
    drag: function(e) {
        var dragData = e.data.dragData;
        dragData.target.css({
            left: dragData.left + e.pageX - dragData.offLeft,
            top: dragData.top + e.pageY - dragData.offTop
        });
        dragData.handler.css({ cursor: 'move' });
        dragData.target.css ({ cursor: 'move' });
        dragData.onMove(e);
    },
    drop: function(e) {
        var dragData = e.data.dragData;
        dragData.target.css(dragData.oldCss); //.css({ 'opacity': '' });
        dragData.handler.css('cursor', dragData.oldCss.cursor);
        dragData.onDrop(e);
        $().unbind('mousemove', dragndrop.drag)
            .unbind('mouseup', dragndrop.drop);
    }
}

Drag — мы начинаем тащить блок, а drop — отпускаем блок после перетаскивания.



Вывод

С помощью перетаскивания можно сделать сайт, на котором все блоки можно будет динамически перетаскивать. Возможно вы найдете применение данного способа у себя на сайте :).


Успехов!

Источник: onextrapixel.com

5 комментариев к записи
  • Вячеслав

    Юрий,а если на сайте уже подключен jQuery,можно и не подключать?

     
    • Юрий

      Вячеслав, если у вас подключена основная библиотека jQuery, то нет необходимости ее подключать. А вот jquery.dragndrop.js и fn.js надо поключить, чтобы всё правильно функционировало.

       
  • cema93

    Доброго времени суток.
    Подскажите как реализовать или куда копать:
    На сайте надо сделать 6 позиций для блоков, надо чтобы перетаскивать можно было в 1 из этих 6 блоков и чтобы оно автоматов ставило блок, если не довел до центра например

     
    • Юрий

      Здравствуйте. Возможно это вам поможет — перейти.

       
  • energi

    А не легше через библиотеку jquery ui

     

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *