Border persists after dragging the bordered item away

April 7, 2023

Below is a list of draggable items. A dashed border is displayed on hover. If the item is dragged away, its border is displayed around the the item that takes its place. I want the border to be hidden after the item is dragged.

function listItemDragged(e) {
    e.target.classList.add('dragging');
    let dropTarget =
        document.elementFromPoint(e.clientX, e.clientY) === null
            ? e.target
            : document.elementFromPoint(e.clientX, e.clientY);

    if (e.target.parentNode === dropTarget.parentNode) {
        dropTarget =
            dropTarget !== e.target.nextSibling
                ? dropTarget
                : dropTarget.nextSibling;
        e.target.parentNode.insertBefore(e.target, dropTarget);
    }
}

function listItemDropped(e) {
    e.target.classList.remove('dragging');
}

function onLoad() {
    let listItems = document.querySelectorAll('.draggable');
    Array.prototype.map.call(listItems, (option) => {
        option.ondrag = listItemDragged;
        option.ondragend = listItemDropped;
    });
}
onLoad();

 

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif
}

body {
    background-color: #2b3035;
}

.draggable {
    display: flex;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 5px;
    border: 1px solid #5c636a;
    margin-right: 5px;
    background-color: #212529;
    cursor: grab;
    color: #ffffff;
    touch-action: none
}

.draggable:hover {
    border: 1px dashed #ff0000;
}

.dragging {
    cursor: grabbing;
    background: transparent;
    color: transparent;
    border: none !important;
}

 
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

<ul class='sortable-list list-unstyled'>
<li class='draggable' draggable='true'>
    Lorem ipsum dolor sit amet 1
</li>
<li class='draggable' draggable='true'>
    Lorem ipsum dolor sit amet 2
</li>
<li class='draggable' draggable='true'>
    Lorem ipsum dolor sit amet 3
</li>
<li class='draggable' draggable='true'>
    Lorem ipsum dolor sit amet 4
</li>
</ul>

>Solution :

You can use the following CSS to disable the hover effect on any draggable item while it is dragging.

ul:not(:has(.dragging)) .draggable:hover {
  border: 1px dashed #ff0000;
}

function listItemDragged(e) {
    e.target.classList.add('dragging');
    let dropTarget =
        document.elementFromPoint(e.clientX, e.clientY) === null
            ? e.target
            : document.elementFromPoint(e.clientX, e.clientY);

    if (e.target.parentNode === dropTarget.parentNode) {
        dropTarget =
            dropTarget !== e.target.nextSibling
                ? dropTarget
                : dropTarget.nextSibling;
        e.target.parentNode.insertBefore(e.target, dropTarget);
    }
}

function listItemDropped(e) {
    e.target.classList.remove('dragging');
}

function onLoad() {
    let listItems = document.querySelectorAll('.draggable');
    Array.prototype.map.call(listItems, (option) => {
        option.ondrag = listItemDragged;
        option.ondragend = listItemDropped;
    });
}
onLoad();

 

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif
}

body {
    background-color: #2b3035;
}

.draggable {
    display: flex;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 5px;
    border: 1px solid #5c636a;
    margin-right: 5px;
    background-color: #212529;
    cursor: grab;
    color: #ffffff;
    touch-action: none
}

ul:not(:has(.dragging)) .draggable:hover {
    border: 1px dashed #ff0000;
}

.dragging {
    cursor: grabbing;
    background: transparent;
    color: transparent;
    border: none !important;
}

 
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

<ul class='sortable-list list-unstyled'>
<li class='draggable' draggable='true'>
    Lorem ipsum dolor sit amet 1
</li>
<li class='draggable' draggable='true'>
    Lorem ipsum dolor sit amet 2
</li>
<li class='draggable' draggable='true'>
    Lorem ipsum dolor sit amet 3
</li>
<li class='draggable' draggable='true'>
    Lorem ipsum dolor sit amet 4
</li>
</ul>