-1

This is a continuation to my failed attempt to enable smooth transition during list element switching. Since I haven't found any good solutions yet, I'm considering to switch elements on dragover instead of drop. However, when I use e.dataTransfer, it works only for drop and not dragover:

function dragStart(e) {
    e.dataTransfer.setData('text/plain', $(e.target).index());
    console.log('dragstart', e.dataTransfer.getData('text/plain'));
}

function sortableDropped(e) {
    console.log('drop', e.dataTransfer.getData('text/plain'));
}

function preventDefault(e) {
    e.preventDefault();
    e.stopPropagation();
    return false;
}

function dragOver(e) {
    preventDefault(e);
    console.log('dragover', e.dataTransfer.getData('text/plain'));
}

function onLoad() {
    for (let item of document.querySelectorAll('.sortable-item')) {
        item.addEventListener('dragstart', dragStart);
        item.addEventListener('drop', sortableDropped);
        item.addEventListener('dragover', dragOver);
    }
}

onLoad();
body {
    background-color: #000000;
}
.sortable-item {
    display: flex;
    margin-top: 10px;
    padding: 12px;
    border-radius: 5px;
    cursor: grab;
    border: 1px solid #5c636a;
    margin-right: 5px;
    color: #ffffff;
}


.sortable-item:active {
    border: 1px solid #0d6efd;
    cursor: grabbing;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js">
</script>
<ul class="sortable-list list-unstyled">
    <li class="sortable-item" draggable="true">
        A
    </li>
    <li class="sortable-item" draggable="true">
        B
    </li>
    <li class="sortable-item" draggable="true">
        C
    </li>
    <li class="sortable-item" draggable="true">
        D
    </li>
</ul>

But clearly something is not working as expected, this is what I get in the console when the first li element is dragged over another:

dragstart 0
744 dragover 
drop 0

I'm expecting 744 dragover 0.

nlblack323
  • 155
  • 1
  • 10

1 Answers1

0

dragOver does not have access to the data transfer object, only drop does. you could assign it to a shared variable on start, if that helps.

let sharedVariable = null;

function dragStart(e) {
    e.dataTransfer.setData('text/plain', $(e.target).index());
    sharedVariable = $(e.target).index();
}

function sortableDropped(e) {
    console.log('drop', e.dataTransfer.getData('text/plain'));
}

function preventDefault(e) {
    e.preventDefault();
    e.stopPropagation();
    return false;
}

function dragOver(e) {
    preventDefault(e);
    console.log('dragover', sharedVariable);
}

function onLoad() {
    for (let item of document.querySelectorAll('.sortable-item')) {
        item.addEventListener('dragstart', dragStart);
        item.addEventListener('drop', sortableDropped);
        item.addEventListener('dragover', dragOver);
    }
}

onLoad();
muzzletov
  • 640
  • 4
  • 13