html5拖放背景颜色故障

Posted

技术标签:

【中文标题】html5拖放背景颜色故障【英文标题】:html5 drag and drop background color glitches 【发布时间】:2022-01-19 01:50:18 【问题描述】:

我正在设置一个视图,可以将表格行拖到另一个 div 内的另一个表格中。在拖动一行时,我通过更改背景颜色突出显示可放置区域。但是,当在可放置 div 内的元素上拖动元素时,背景颜色会出现闪烁。

我已经在 J​​SFiddle (link) 中使用以下代码复制了它:

html

<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>

JS

function dragOver(ev) 
    document.getElementById('table1-wrapper').style.backgroundColor = 'gray';

  
function dragLeave(ev) 
  document.getElementById('table1-wrapper').style.backgroundColor = null;

CSS

.table-wrapper 
  border: 1px solid black;

关于如何修复故障的任何想法?

【问题讨论】:

我花了一些时间研究这个问题。看起来这个问题是由一些不是table-wrapper 而不是在表包装器内部的区域引起的,并且这些区域不会冒泡ondragover 事件。我认为非 jquery 解决方案需要一些不同的逻辑,例如使用 dragstart 事件在覆盖整个元素的 dropareas 上创建覆盖,因此注册任何 ondragover 事件 我今天又看了一些,发现了这个问题:***.com/questions/7110353/… 其中的一个答案让我尝试用#table1-wrapper * pointer-events: none; 更新我的小提琴的 CSS 似乎解决了它:) 【参考方案1】:

使用 jQuery 可以获得更快、更简单的解决方案。您所要做的就是修改下面示例中的 jQuery 代码,将其包含在您自己的代码中。

$(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>

【讨论】:

你知道用 Angular 实现它的方法吗?【参考方案2】:

所以我刚刚找到this question。使用那里的答案之一,我可以通过将其添加到我的小提琴 CSS 中来获得我想要做的事情:

#table1-wrapper * 
  pointer-events: none;

查看更新的小提琴here。

【讨论】:

以上是关于html5拖放背景颜色故障的主要内容,如果未能解决你的问题,请参考以下文章

如何修改拖放预览SwiftUI的背景颜色和形状?

html5 canvas 画一个矩形,在矩形里添加文字。 文字颜色与矩形背景颜色有关问题?

HTML背景颜色和背景图片

使用 ImageMagick 创建的动画 gif 具有故障块颜色背景

使用 css 更改 HTML5 中的音频背景颜色

css背景颜色动态渐变实例