Свободное перетаскивание элементов DOM модели
Уроки Свободное перетаскивание элементов DOM модели
22 мая 2015
1867
свободное перетаскивание, перетаскивание элементов DOM модели

Свободное перетаскивание элементов DOM модели

Сложность Рубрика JQuery Браузеры
Демонстрация » Скачать »

Возможность перетаскивать элементы при помощи jQuery UI на сегодняшний день очень востребована, но для тех, кому нужна какая-то альтернатива, мы хотим предложить отдельную миниатюрную js-библиотеку под названием Draggabilly. Библиотека работает со всеми современными браузерами (IE8+), и здесь имеется встроенная поддержка touch-событий.

 

С помощью draggabilly.js вы можете сделать любой веб-элемент перетаскиваемым. Вы можете настраивать поведение перетаскиваемых элементов и, к примеру, добавить сетку, по которой его можно перемещать, привязывать слушателей событий к событиям, ограничивать перемещение по осям x и y, а также многое другое.

 

HTML

<div style="width: 100%; height: 500px;">
	<div style="width: 33%; display: inline-block; float: left;">
	<br />
		<h1>Свободное и плавное движение элемента</h1>
		<div class="draggable"></div>
	<br />
		<h1>Свободное движения елемента по сетке 20х20</h1>
		<div class="draggable2"></div>
	<br />
		<h1>Плавное движение элемента только по оси X (горизонтально)</h1>
		<div class="draggable3"></div>
	</div>

	<div style="width: 67%; display: inline-block; float: left;">
		<h1>Плавное движение элемента только при нажатии на выделенную его часть</h1>
		<div class="draggable4">
		  <div class="handle"></div>
		</div>
	<br/>	
		<h1>Запрет движения элементам вне блока, в котором они находятся</h1>
		<div class="container">
		  <div class="draggable5"></div>
		  <div class="draggable5"></div>
		  <div class="draggable5"></div>
		</div>
	</div>
</div>

CSS

body { font-family: sans-serif; }
h1 { font-size: 18px; }
/*Свободное и плавное движение элемента*/
.draggable {
  width: 140px;
  height: 140px;
  background: red;
  border-radius: 70px;
}
.draggable.is-pointer-down {
  background: green;
}
.draggable.is-dragging { opacity: 0.7; }

/*Свободное движения елемента по сетке 20х20*/
.draggable2 {
  width: 140px;
  height: 140px;
  background: red;
  border-radius: 70px;
}
.draggable2.is-pointer-down {
  background: green;
}
.draggable2.is-dragging { opacity: 0.7; }

/*Плавное движение элемента только по оси X (горизонтально)*/
.draggable3 {
  width: 140px;
  height: 140px;
  background: red;
  border-radius: 70px;
}
.draggable3.is-pointer-down {
  background: green;
}
.draggable3.is-dragging { opacity: 0.7; }

/*Плавное движение элемента только при нажатии на выделенную его часть*/
.draggable4 {
  width: 100px;
  height: 100px;
  background: red;
  border-radius: 10px;
  padding: 20px;
}
.draggable4.is-pointer-down {
  background: green;
}
.draggable4.is-dragging { opacity: 0.7; }
.handle {
  background: #555;
  background: hsla(0, 0%, 0%, 0.4);
  width: 60px;
  height: 60px;
  border-radius: 70px;
}

/*Запрет движения элементам вне блока, в котором они находятся*/
.container {
  padding: 10px;
  border: 5px solid green;
  border-radius: 10px;
  width: 600px;
  height: 200px;
}
.draggable5 {
  width: 140px;
  height: 140px;
  background: red;
  border-radius: 70px;
  margin: 0 10px 10px 0;
  float: left;
}
.draggable5.is-pointer-down {
  background: green;
  z-index: 2; /* above other draggies */
}
.draggable5.is-dragging { opacity: 0.7; }


 

JS

<script>
//Свободное и плавное движение элемента
$(document).ready( function() {
  var $draggable = $('.draggable').draggabilly();
});
</script>



<script>
//Свободное движения елемента по сетке 20х20
$(document).ready( function() {
  var $draggable = $('.draggable2').draggabilly({
    grid: [ 20, 20 ]
  });
});
</script>



<script>
//Плавное движение элемента только по оси X (горизонтально)
$(document).ready( function() {
  var $draggable = $('.draggable3').draggabilly({
    axis: 'x'
  });
});
</script>



<script>
//Плавное движение элемента только при нажатии на выделенную его часть
$(document).ready( function() {
  var $draggable = $('.draggable4').draggabilly({
    handle: '.handle'
  });
});
</script>



<script>
//Запрет движения элементам вне блока, в котором они находятся
$(document).ready( function() {
  var $draggables = $('.draggable5').draggabilly({
    //запрет на выход с родительского элемента
    containment: true
  });
});
</script>

 

containment - ограничивает область перетаскивания. Возможные значения: parent (родительский элемент, в данном случае TRUE), document (текущий документ), window (окно), [x1, y1, x2, y2] - координаты левого верхнего и правого нижнего угла допустимой области. 

handle - определяет, за какой элемент внутри данного осуществляется перетаскивание.

 

У плагина draggable есть четыре метода, которые позволяют менять работу плагина после его инициализации:
destroy - удаляет всю функциональность плагина Draggable. 

Пример:

$(".draggable").draggable(‘destroy’);

 

disable - временно запрещает работу всей функциональности плагина Draggable.

Пример:

$(".draggable").draggable(‘disable’);

 

enable - разрешает работу всей функциональности плагина Draggable (если она была запрещена). 

Пример:

$(".draggable").draggable(‘enable’);

 

option - позволяет установить значения параметров плагина после его инициализации.

Пример: 

$(".draggable").draggable(‘option’, optionName, [value]);

 

На этом все, благодарю за внимание!

 





Алексей Копча