Перетягування блоків використовуючи jquery

Бібліотека jQuery є дуже потужною. І в цій статті я розповім як створити динамічні перетягуються блоки за допомогою jQuery.

Приклад можна побачити тут:

Подивитися прімерСкачать

HTML частина

В html створюємо два блоки, які потім будемо перетягувати:

+12345678910111213141516171819

lt;div id="Wrap"gt;lt;div style="Opacity: 1 cursor: move- left: 825px; top: 472px;" class="Dv1"gt;lt;h2 style="Cursor: move;" class="Handler"gt; перетягнути менеlt;/h2gt;lt;div class="Content"gt; текст зникає при перетягуванні! lt;brgt; координати: (Ліворуч:lt;stronggt; 944lt;/stronggt; , Зверху:lt;stronggt; 485lt;/stronggt;)lt;/divgt;lt;/divgt;lt;div style="Opacity: 1 cursor: move- left: 634px; top: 181px;" class="Dv2"gt;lt;div style="Cursor: move;" class="Gb"gt;lt;h2 class="Handler2"gt; І мене тежlt;/h2gt;lt;div class="Content2"gt; {z-index: 200, прозорість: 0.9}lt;brgt;lt;brgt;lt;smallgt; lt;stronggt; Можеш перетягувати куди завгодно!lt;/stronggt; lt;/smallgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;

CSS частина

А сьогодні для цих блоків можна застосовувати кілька CSS властивостей:

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667

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 файли:

Відео: Masonry jQuery. Оптимальне розміщення елементів сайту

lt;script type="Text / javascript" src="Http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"gt; lt;/scriptgt;lt;script type="Text / javascript" src="Js / jquery.dragndrop.js"gt; lt;/scriptgt;lt;script type="Text / javascript" src="Js / fn.js"gt; lt;/scriptgt;

Перетягування знаходиться в даній частині коду:

1234567891011121314151617181920

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)-}}

Відео: Основи javascript 18 - Зміна стилів елемента

Drag - ми починаємо тягнути блок, а drop - відпускаємо блок після перетягування.

висновок

За допомогою перетягування можна зробити сайт, на якому всі блоки можна буде динамічно перетягувати. Можливо ви знайдете застосування даного способу у себе на сайті :).

Успіхів!

джерело: onextrapixel.com

Поділися в соц мережах: