Pure Javascript table cell mover
HTML
<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td>F</td>
</tr>
<tr></tr>
<tr>
<td>G</td>
</tr>
</table>
JavaScript
function C(tag, html, props) {
var el = document.createElement(tag);
if (html) el.innerHTML = html;
if (props) Object.assign(el, props);
return el;
}
Node.prototype.all = function(s) {
return Array.from(this.querySelectorAll(s));
}
Node.prototype.on = Node.prototype.addEventListener;
Node.prototype.off = Node.prototype.removeEventListener;
Node.prototype.show = function(v) {
this.style.display = v || 'block';
return this;
}
Node.prototype.hide = function() {
this.style.display = 'none';
return this;
}
Node.prototype.attr = function(props) {
Object.assign(this, props);
return this;
}
Node.prototype.css = function(style) {
Object.assign(this.style, style);
return this;
}
Element.prototype.rect = Element.prototype.getBoundingClientRect;
Array.prototype.attr = function(props) {
this.forEach(i => i.attr(props));
return this;
}
Array.prototype.css = function(style) {
this.forEach(i => i.css(style));
return this;
}
Array.prototype.removeClass = function(cls) {
this.forEach(i => i.classList.remove(cls));
return this;
}
Array.prototype.addClass = function(cls) {
this.forEach(i => i.classList.add(cls));
return this;
}
Array.prototype.show = function(v) {
this.forEach(i => i.show(v));
return this;
}
Array.prototype.hide = function() {
this.forEach(i => i.hide());
return this;
}
var min = Math.min,
max = Math.max,
abs = Math.abs,
floor = Math.floor;
document.body.all('td').forEach(td => {
td.innerHTML = `<div draggable="true">${td.innerHTML}</div>`; // wrap in div draggable
})
var dragged = null;
document.body.on('dragstart', function(e) {
console.log('drag', e.target)
e.dataTransfer.setData("text/html", "");
e.dataTransfer.effectAllowed = 'move';
dragged = e.target;
});
document.body.on('dragover', function(e) {
e.preventDefault();
});
document.body.on('drop', function(e) {
e.preventDefault();
if (e.target.nodeName === 'TD') { //here you should loop to find the closest children in td
if...