Как изменить перетаскивание с вертикального на горизонтальное в JavaScript? ⇐ CSS

[Anonymous]

Я работаю над сортируемым списком, я новичок в JavaScript, я могу перетаскивать по вертикали. но я не могу сделать то же самое по горизонтали. Я видел, как это завершилось в учебнике.
Нужно ли мне использовать ось X для горизонтального положения? Если кто-нибудь может помочь мне с этим кодом.
Насколько я могу судить, падение, а также события перетаскивания и перетаскивания знают только об элементе, в который они входят. Они не могут определить, находится ли мышь в верхней или нижней половине зоны перетаскивания. Как в основном создать зону перетаскивания и элемент переключения в случае горизонтального положения
Я хочу создать что-то вроде этого


Я не хочу менять местами слова.

Код: Выделить всё

const list = document.querySelector('.list')
const listItems = document.querySelectorAll('.list-item')

// let dragIndex, dragSource

const getMouseOffset = (evt) => {
const targetRect = evt.target.getBoundingClientRect()
const offset = {
x: evt.pageX - targetRect.left,
y: evt.pageY - targetRect.top
}
return offset
}

const getElementVerticalCenter = (el) => {
const rect = el.getBoundingClientRect()
return (rect.bottom - rect.top) / 2
}

const appendPlaceholder = (evt, idx) => {
evt.preventDefault()
if (idx === dragIndex) {
return
}

const offset = getMouseOffset(evt)
const middleY = getElementVerticalCenter(evt.target)
const placeholder = list.children[dragIndex]

// console.log(`hover on ${idx} ${offset.y > middleY ? 'bottom half' : 'top half'}`)
if (offset.y > middleY) {
list.insertBefore(evt.target, placeholder)
} else if (list.children[idx + 1]) {
list.insertBefore(evt.target.nextSibling || evt.target, placeholder)
}
return
}

function sortable(rootEl, onUpdate) {
var dragEl;

// Making all siblings movable
[].slice.call(rootEl.children).forEach(function (itemEl) {
itemEl.draggable = true;
});

// Function responsible for sorting
function _onDragOver(evt) {
evt.preventDefault();
evt.dataTransfer.dropEffect = 'move';

var target = evt.target;
if (target && target !== dragEl && target.nodeName == 'DIV') {
// Sorting
const offset = getMouseOffset(evt)
const middleY = getElementVerticalCenter(evt.target)

if (offset.y > middleY) {
rootEl.insertBefore(dragEl, target.nextSibling)
} else {
rootEl.insertBefore(dragEl, target)
}
}
}

// End of sorting
function _onDragEnd(evt){
evt.preventDefault();

dragEl.classList.remove('ghost');
rootEl.removeEventListener('dragover', _onDragOver, false);
rootEl.removeEventListener('dragend', _onDragEnd, false);

// Notification about the end of sorting
onUpdate(dragEl);
}

// Sorting starts
rootEl.addEventListener('dragstart', function (evt){
dragEl = evt.target; // Remembering an element that will be moved

// Limiting the movement type
evt.dataTransfer.effectAllowed = 'move';
evt.dataTransfer.setData('Text', dragEl.textContent);

// Subscribing to the events at dnd
rootEl.addEventListener('dragover', _onDragOver, false);
rootEl.addEventListener('dragend', _onDragEnd, false);

setTimeout(function () {
// If this action is performed without setTimeout, then
// the moved object will be of this class.
dragEl.classList.add('ghost');
}, 0)
}, false);
}

// Using
sortable(list, function (item) {
console.log(item);
});

Код: Выделить всё

.list {
padding: 1rem;
}

.ghost {
opacity: 1;
}

.list-item {
background: #8bb3f4;
padding: 0.5rem;
border: 1px solid white;
margin: 1px 0;
}

.placeholder {
display: none;
background: #303742;
pointer-events: none;
}

Код: Выделить всё

Item 1

Item 2

Item 3

Item 4

Подробнее здесь: https://stackoverflow.com/questions/679 ... javascript