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

Возможность перетаскивать элементы при помощи 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]);

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