Вот есть код. Не могу понять, почему после окончания переноса элемента он переходит по ссылке взятой из id элемента. как можно исправить? Спасибо.
<!DOCTYPE html>
<html>
<head>
<title>Dragdrop</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
</head>
<body>
<style>
.color {
width: 100px;
height: 50px;
border: dotted 1px black;
margin: 5px;
}
.color-target {
width: 100px;
height: 50px;
border: dotted 1px black;
margin: 5px;
}
#r {
background-color: red;
}
#o {
background-color: orange;
}
#y {
background-color: yellow;
}
#g {
background-color: green;
}
#b {
background-color: blue;
}
#i {
background-color: indigo;
}
#v {
background-color: violet;
}
</style>
Drag from here...
<div class="color" id="r" draggable="true"></div>
<div class="color" id="o" draggable="true"></div>
<div class="color" id="y" draggable="true"></div>
<div class="color" id="g" draggable="true"></div>
<div class="color" id="b" draggable="true"></div>
<div class="color" id="i" draggable="true"></div>
<div class="color" id="v" draggable="true"></div>
To here...
<div class="color-target"></div>
<div class="color-target"></div>
<script>
$(document).ready(function() {
$('.color').bind('dragstart', function(event) {
event.originalEvent.dataTransfer.setData('text/plain', event.target.getAttribute('id'));
});
$('.color-target, .color').bind('dragover', function(event) {
event.preventDefault();
});
$('.color-target').bind('drop', function(event) {
var src = event.originalEvent.dataTransfer.getData("text/plain");
var bc = $('#' + src).css('background-color');
$(this).css('background-color', bc);
});
$('.color').bind('drop', function(event) {
var src = event.originalEvent.dataTransfer.getData("text/plain");
swapNodes(document.getElementById(src), this);
});
function swapNodes(a, b) {
var aparent= a.parentNode;
var asibling= a.nextSibling===b? a : a.nextSibling;
b.parentNode.insertBefore(a, b);
aparent.insertBefore(b, asibling);
}
});
</script>
</body>
</html>
