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>Стили для курсоров «Drag & Drop»:
#element {
cursor: grab;
}
#element:active {
cursor: grabbing;
}Пример:
Чтобы запретить вынос элемента за пределы родителя, нужно установить в опции плагина свойство containment и указать в нём id или класс родителя.
<div class="element-wrp">
<div id="element">Drag&Drop</div>
</div>
<script>
$(function(){
$('#element').draggable({
containment: '.element-wrp'
});
});
</script>Пример:
За перемещение с определённым шагом отвечает параметр 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>Пример:
Движение только по горизонтали
<div class="element-wrp">
<div id="element">Drag&Drop</div>
</div>
<script>
$(function(){
$('#element').draggable({
containment: '.element-wrp',
axis: 'x'
});
});
</script>Пример:
Движение только по вертикали
<div class="element-wrp">
<div id="element">Drag&Drop</div>
</div>
<script>
$(function(){
$('#element').draggable({
containment: '.element-wrp',
axis: 'y'
});
});
</script>Пример:
Перемещение только под заданным углом
<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>Пример:
Чтобы получить координаты перетаскиваемого элемента, потребуется обработчик события «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>Пример:
Если требуется точное перемещение элемента, то удобнее двигать его с клавиатуры клавишами ← ↑ ↓ →. У самого плагина 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>Пример:
Сделать линию между перемещаемыми элементами можно с помощью 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>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;
}
Равиль Ринатович
