html5 拖放背景颜色问题
html5 drag and drop background color glitches
我正在设置一个视图,其中 table 行可以拖动到另一个 table 中的另一个 div。拖动一行时,我通过更改背景颜色突出显示可放置区域。但是,当将元素拖动到可放置 div 内的元素上时,背景颜色会出现问题。
我用以下代码在 JSFiddle (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;
}
关于如何解决故障的任何想法?
使用 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>
所以我刚找到 this question。使用那里的一个答案,我能够通过将其添加到我的 fiddle 的 CSS:
来获得我想要做的事情
#table1-wrapper * {
pointer-events: none;
}
查看更新后的 fiddle here。
我正在设置一个视图,其中 table 行可以拖动到另一个 table 中的另一个 div。拖动一行时,我通过更改背景颜色突出显示可放置区域。但是,当将元素拖动到可放置 div 内的元素上时,背景颜色会出现问题。
我用以下代码在 JSFiddle (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;
}
关于如何解决故障的任何想法?
使用 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>
所以我刚找到 this question。使用那里的一个答案,我能够通过将其添加到我的 fiddle 的 CSS:
来获得我想要做的事情#table1-wrapper * {
pointer-events: none;
}
查看更新后的 fiddle here。