Więc tak zrobiłem sobie przekładanie elementów < li > za pomocą metody drag and drop. Wykorzystałem taką bibliotekę (jeśli można tak to nazwać)
function handleDragStart(e) {
this.style.opacity = '0.4'; // this / e.target is the source node.
}
var cols = document.querySelectorAll('#columns .column');
[].forEach.call(cols, function(col) {
col.addEventListener('dragstart', handleDragStart, false);
});
function handleDragStart(e) {
this.style.opacity = '0,7'; // this / e.target is the source node.
}
function handleDragOver(e) {
if (e.preventDefault) {
e.preventDefault(); // Necessary. Allows us to drop.
}
e.dataTransfer.dropEffect = 'move'; // See the section on the DataTransfer object.
return false;
}
function handleDragEnter(e) {
// this / e.target is the current hover target.
this.classList.add('over');
}
function handleDragLeave(e) {
this.classList.remove('over'); // this / e.target is previous target element.
}
var cols = document.querySelectorAll('#columns .column');
[].forEach.call(cols, function(col) {
col.addEventListener('dragstart', handleDragStart, false);
col.addEventListener('dragenter', handleDragEnter, false);
col.addEventListener('dragover', handleDragOver, false);
col.addEventListener('dragleave', handleDragLeave, false);
});
function handleDrop(e) {
// this / e.target is current target element.
if (e.stopPropagation) {
e.stopPropagation(); // stops the browser from redirecting.
}
// See the section on the DataTransfer object.
return false;
}
function handleDragEnd(e) {
// this/e.target is the source node.
[].forEach.call(cols, function (col) {
col.classList.remove('over');
});
}
var cols = document.querySelectorAll('#columns .column');
[].forEach.call(cols, function(col) {
col.addEventListener('dragstart', handleDragStart, false);
col.addEventListener('dragenter', handleDragEnter, false)
col.addEventListener('dragover', handleDragOver, false);
col.addEventListener('dragleave', handleDragLeave, false);
col.addEventListener('drop', handleDrop, false);
col.addEventListener('dragend', handleDragEnd, false);
});
var dragSrcEl = null;
function handleDragStart(e) {
// Target (this) element is the source node.
this.style.opacity = '0.7';
****** ------> w tym miejscu mamy dostęp do elementu który jest dopiero co klikany<------- *******
dragSrcEl = this;
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/html', this.innerHTML);
}
function handleDrop(e) {
// this/e.target is current target element.
if (e.stopPropagation) {
e.stopPropagation(); // Stops some browsers from redirecting.
}
// Don't do anything if dropping the same column we're dragging.
if (dragSrcEl != this)
{
****** ------> tutaj możemy zamieścić kod który się wykona na elemencie po zmianie miejsc, po upuszceniu <------- *******
// Set the source column's HTML to the HTML of the column we dropped on.
dragSrcEl.innerHTML = this.innerHTML;
this.innerHTML = e.dataTransfer.getData('text/html');
}
return false;
}
elementy zaś mam mniej więcej takie takie.
<div class="dol"><li class="column" draggable="true" data-name="'nazwa_miejsca'" >
nazwa jakas tam
</li></div>
Jak można zauważyć w data-name umieściłem nazwę miejsca. Właśnie o te miejsce chodzi.
Bowiem pewne elementy li są porozmieszczane w różnych miejscach, (tabelkach) którą umieszczam w data-name. Oczywiście mogę umieścić ja jeszcze gdzie indziej: ). Potrzebuję zrobić tak aby elementy mogły się zamieniać tylko wtedy kiedy mają te same miejsce w data-name, próbowałem w różny sposób to zrobić za pomocą wyżej zamieszconego scryptu javascript. Niestety bez większych rezultatów.