Перетаскивание элементов Drag and drop (jQuery UI Droppable)

UI Droppable – плагин, который позволяет сделать перетаскивание элементов мышью (Drag&Drop).

Примеры https://jqueryui.com/draggable/
Документация https://api.jqueryui.com/draggable/

<script src="/jquery/2.1.1/jquery.min.js"></script>
<script src="/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div id="element">Drag&Drop</div>

<script>
$(function(){
	$("#element").draggable();
});
</script>
HTML

Стили для курсоров «Drag & Drop»:

#element {
	cursor: grab; 
}
#element:active {
	cursor: grabbing;
}
CSS

Пример:

Чтобы запретить вынос элемента за пределы родителя, нужно установить в опции плагина свойство containment и указать в нём id или класс родителя.

<div class="element-wrp">
	<div id="element">Drag&Drop</div>
</div>

<script>
$(function(){
	$('#element').draggable({
		containment: '.element-wrp'
	});
});
</script>
HTML

Пример:

За перемещение с определённым шагом отвечает параметр grid: [20, 20].

<div class="element-wrp">
	<div id="element">Drag&Drop</div>
</div>

<script>
$(function(){
	$('#element').draggable({
		containment: '.element-wrp',
		grid: [20, 20]
	});
});
</script>
HTML

Пример:

Движение только по горизонтали

<div class="element-wrp">
	<div id="element">Drag&Drop</div>
</div>

<script>
$(function(){
	$('#element').draggable({
		containment: '.element-wrp',
		axis: 'x'
	});
});
</script>
HTML

Пример:

Движение только по вертикали

<div class="element-wrp">
	<div id="element">Drag&Drop</div>
</div>

<script>
$(function(){
	$('#element').draggable({
		containment: '.element-wrp',
		axis: 'y'
	});
});
</script>
HTML

Пример:

Перемещение только под заданным углом

<div class="element-wrp">
	<div id="element-1" href="#">Drag&Drop 20°</div>	
	<div id="element-2" href="#">Drag&Drop -20°</div>	
</div>

<script>
$(function(){
	var start_1 = 0;
	$("#element-1").draggable({ 
		containment: ".element-wrp", 
		scroll: false,
		create: function( event, ui ) {
			start_1 = parseInt($(this).css('top'));
		},
		drag: function(event, ui){
			var angle = 20;
			ui.position.top = (ui.position.left * Math.tan(angle * Math.PI / 180)) + start_1;
		}
	});

	var start_2 = 0;
	$("#element-2").draggable({ 
		containment: ".element-wrp", 
		scroll: false,
		create: function( event, ui ) {
			start_2 = parseInt($(this).css('top'));
		},
		drag: function(event, ui){
			var angle = -20;
			ui.position.top = (ui.position.left * Math.tan(angle * Math.PI / 180)) + start_2;
			
		}
	});
});
</script>
HTML

Пример:

Чтобы получить координаты перетаскиваемого элемента, потребуется обработчик события «drag».

<form action="" method="post">
	<input type="text" name="x">
	<input type="text" name="y">
</form>	

<div class="element-wrp">
	<div id="element">Drag&Drop</div>
</div>

<script>
$(function(){
	$('#element').draggable({
		containment: '.element-wrp',
		drag: function(event, ui){
			$('input[name="x"]').val(ui.position.left);
			$('input[name="y"]').val(ui.position.top);
		}
	});
});
</script>
HTML

Пример:

Если требуется точное перемещение элемента, то удобнее двигать его с клавиатуры клавишами . У самого плагина draggable нет событий чтобы выполнить такую функцию, поэтому придется писать свой обработчик.

В обработчике нажатий клавиш нужно будет вызывать событие drag самого плагина, чтобы при перемещении срабатывал и его код, например вывод координат элемента.

<form action="" method="post">
	<input type="text" name="x1">
	<input type="text" name="y1">
	<input type="text" name="x2">
	<input type="text" name="y2">
</form>	

<div class="element-wrp">
	<a class="draggable-el" id="element-1" href="#"></a>	
	<a class="draggable-el" id="element-2" href="#"></a>		
</div>

<script>
$(function(){
	marker_state = false;

	$("#element-1").draggable({
		containment: '.element-wrp',
		drag: function(event, ui){
			$('input[name="x1"]').val(ui.position.left);
			$('input[name="y1"]').val(ui.position.top);
		}
	});

	$("#element-2").draggable({
		containment: '.element-wrp',
		drag: function(event, ui){
			$('input[name="x2"]').val(ui.position.left);
			$('input[name="y2"]').val(ui.position.top);
		}
	});

	$(".draggable-el").bind('click mousedown', function() {
		$('.draggable-el').removeClass('draggable-active');
		$(this).addClass('draggable-active');
		marker_state = true;
		return false;
	});	
	
	$(document).mouseup(function(e){
		var marker = $('.draggable-el'); 
		if (!marker.is(e.target) && marker.has(e.target).length === 0) { 
			marker.removeClass('draggable-active');
			marker_state = false;
		}
		return false;
	});

	$(document).bind('keydown', function(e) {
		if (marker_state) {	
			switch(e.which) {
				case 37: {
					$('.draggable-active').animate({left: '-=1'}, 0, function(){
						$(this).draggable('option', 'drag').call('', '', {position: $(this).position()});
					});
					return false;
				}
				break;
				case 38: {
					$('.draggable-active').animate({top: '-=1'}, 0, function(){
						$(this).draggable('option', 'drag').call('', '', {position: $(this).position()});
					});
					return false;
				}
				break;
				case 39: {
					$('.draggable-active').animate({left: '+=1'}, 0, function(){
						$(this).draggable('option', 'drag').call('', '', {position: $(this).position()});
					});
					return false;
				}
				break;
				case 40: {
					$('.draggable-active').animate({top: '+=1'}, 0, function(){
						$(this).draggable('option', 'drag').call('', '', {position: $(this).position()});
					});
					return false;
				}
				break;
			}
		}
	});
});
</script>
HTML

Пример:

Сделать линию между перемещаемыми элементами можно с помощью SVG, использовав его как подложку и задавая элементу <line> координаты начала и конца линии в зависимости от положения.

<div class="element-wrp">
	<svg class="draggable-bg">
		<line id="draggable-line" x1="186" y1="174" x2="587" y2="104" stroke="red" stroke-width="2"></line>
	</svg>	
	<a id="element-1" href="#"></a>	
	<a id="element-2" href="#"></a>		
</div>

<script>
$(function(){
	$("#element-1").draggable({ 
		drag: function(event, ui){
			var pos2 = $('#element-2').position();
			$('#draggable-line')
				.attr('x1', ui.position.left + 25)
				.attr('y1', ui.position.top + 25)
				.attr('x2', pos2.left + 25)
				.attr('y2', pos2.top + 25);
		}
	});

	$("#element-2").draggable({ 
		drag: function(event, ui){
			var pos1 = $('#element-1').position();
			$('#draggable-line')
				.attr('x1', pos1.left + 25)
				.attr('y1', pos1.top + 25)
				.attr('x2', ui.position.left + 25)
				.attr('y2', ui.position.top + 25);
		}
	});
});
</script>
HTML

CSS стили:

.element-wrp {
	position: relative;
	height: 300px;
}
.draggable-bg {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}
#element-1 {
	position: absolute;
	left: 161px;
	top: 149px;
	border: 1px solid #ddd;
	background: #efefef;
	cursor: move;
	width: 50px;
	height: 50px;
}
#element-2 {
	position: absolute;
	left: 562px;
	top: 79px;
	border: 1px solid #ddd;
	background: #efefef;
	cursor: move;
	width: 50px;
	height: 50px;
}
CSS

Пример:

11.01.2022
409

Комментарии

, чтобы добавить комментарий.

Другие публикации

Манипуляции с элементами jQuery
Сборник методов jQuery для управления элементами DOM.
9016
+4
Поворот изображения по двум точкам на PHP GD + jQuery UI Droppable
​Задача - необходимо повернуть изображение на угол, найденный путем выставления двух точек на линию горизонта...
339
0
Как изменить Favicon сайта из JavaScript
Для замены Favicon во вкладке браузера достаточно у элемента link rel="icon" в атрибуте href указать путь до нового...
4794
+2
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
23488
+29
Слайдеры изображений на плагине bxSlider
BxSlider отличный jquery плагин слайдеров и каруселей, адаптивный, легко настраивается, поддерживает любой тип...
9704
0
Перебор ячеек таблицы jQuery
Обойти ячейки таблицы можно с помощью jQuery метода each, например следующий код выводит текст из всех ячеек в консоль.
16745
+2