html5 drag and drop background color glitches

user_7307048 0
Viewed 511

I'm setting up a view where table rows can be dragged to another table inside another div. While dragging a row, I highlight the droppable area by changing the background color. However, when dragging an element over elements within the droppable div, the background color glitches in and out.

I've reproduced it in JSFiddle (link) with the following code:

function dragOver(ev) {
  document.getElementById('table1-wrapper').style.backgroundColor = 'gray';
}
  
function dragLeave(ev) {
  document.getElementById('table1-wrapper').style.backgroundColor = null;
}
.table-wrapper {
  border: 1px solid black;
}
<h3>
Drag item from some stuff 2 to some stuff 1
</h3>

<div id="table1-wrapper" class="table-wrapper" ondragover="dragOver(event)" ondragleave="dragLeave(event)">
  <table >
    <tbody>
      <tr draggable="true">
        <td>some stuff 1</td>
      </tr>
      <tr draggable="true">
        <td>some stuff 1</td>
      </tr>
      <tr draggable="true">
        <td>some stuff 1</td>
      </tr>
    </tbody>
  </table>
</div>

<div id="table2-wrapper" class="table-wrapper" ondragover="dragOver(event)" ondragleave="dragLeave(event)">
  <table >
    <tbody>
      <tr draggable="true">
        <td>some stuff 2</td>
      </tr>
      <tr draggable="true">
        <td>some stuff 2</td>
      </tr>
      <tr draggable="true">
        <td>some stuff 2</td>
      </tr>
    </tbody>
  </table>
</div>

Any ideas on how to fix the glitchiness?

drag-and-drop css html javascript
2 Answers

A faster and easier solution can be obtained using jQuery. All you have to do is adapt the jQuery code in the example below by including it in your own code.

$(function () {
    $("#managers, #workers").sortable({
            connectWith: "ul",
            placeholder: "placeholder",
            delay: 150
        })
        .disableSelection()
        .dblclick(function (e) {
            var item = e.target;

            if (e.currentTarget.id === 'managers') {
                //move from all to user
                $(item).fadeOut('fast', function () {
                    $(item).appendTo($('#workers')).fadeIn('slow');
                });
            } else {
                //move from user to all
                $(item).fadeOut('fast', function () {
                    $(item).appendTo($('#managers')).fadeIn('slow');
                });
            }
        });
});
.user-container {
    width: 330px;
}
.right {
    float: right;
}
.left {
    float: left;
}
p {
    clear: both;
    padding-top: 1em;
}
.group-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-right: 10px;
    background: #eee;
    padding: 5px;
    width: 143px;
    min-height: 1.5em;
    font-size: 0.85em;
}
.group-list li {
    margin: 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
}
.group-list li.placeholder {
    height: 1.2em
}
.user {
    border: 1px solid #bbb;
    background-color: #fafafa;
    cursor: move;
}
.user.ui-sortable-helper {
    opacity: 0.5;
}
.placeholder {
    border: 1px solid orange;
    background-color: #fffffd;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title> Dashboard </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="user-container">
        <div class="left">
            <label>Manager</label>
            <ul id="managers" class="group-list">
                <li class="user">Thomas</li>
                <li class="user">John</li>
                <li class="user">George</li>
            </ul>
        </div>

        <div class="right">
            <label>Workers</label>
            <ul id="workers" class="group-list">
                <li class="user">Steven</li>
                <li class="user">Jasmine</li>
            </ul>
        </div>
    </div>
    <script src="main.js"></script>
</body>
</html>

user_150326880

So I just found this question. Using one of the answers there, I was able to get what I was trying to do by adding this to my fiddle's CSS:

#table1-wrapper * {
  pointer-events: none;
}

Check out the updated fiddle here.

user_73070480
Related