
Июль 3, 2014 Запись была обновлена
Перетаскивание блоков используя 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
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Юрий,а если на сайте уже подключен jQuery,можно и не подключать?
Вячеслав, если у вас подключена основная библиотека jQuery, то нет необходимости ее подключать. А вот jquery.dragndrop.js и fn.js надо поключить, чтобы всё правильно функционировало.
Доброго времени суток.
Подскажите как реализовать или куда копать:
На сайте надо сделать 6 позиций для блоков, надо чтобы перетаскивать можно было в 1 из этих 6 блоков и чтобы оно автоматов ставило блок, если не довел до центра например
Здравствуйте. Возможно это вам поможет — перейти.
А не легше через библиотеку jquery ui