文章/答案/技术大牛

发布

社区首页 >问答首页 >html5拖放背景色小故障

问html5拖放背景色小故障
EN

Stack Overflow用户

提问于 2021-12-15 22:28:52

回答 2查看 706关注 0票数 2

我正在设置一个视图，其中可以将表行拖到另一个div中的另一个表中。在拖动一行时，我通过更改背景色来突出显示可下垂的区域。但是，当将元素拖到可下垂div中的元素上时，背景颜色会出现出入问题。

我用以下代码在JSFiddle (链接)中复制了它：

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>

对如何解决浮华问题有什么想法吗？

css

drag-and-drop

javascript

html

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-12-16 16:12:43

所以我刚找到了这个问题。使用其中的一个答案，我能够得到我想要做的事情，把它添加到我的小提琴的CSS中：

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

查看更新的小提琴这里。

票数 1

Stack Overflow用户

发布于 2021-12-15 22:41:03

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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70371100

复制

相似问题

问html5拖放背景色小故障
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问html5拖放背景色小故障EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问html5拖放背景色小故障
EN