下面是用来模拟拖放效果的.我正在使用Object.assign(target.style, ...)手动更改mousedown和mouseup事件的样式.如果我用包含mousedown个样式的.dragging个类替换赋值语句，然后删除mouseup上的那个类，则在删除.dragging个类之后，mouseup中设置的关联的left和top属性将保持不变.
以下是工作版本:
(function() {
let targets = document.querySelectorAll('.draggable');
let offsetX;
let offsetY;
targets.forEach((target) => {
target.isMouseDown = false;
target.initialOffsetLeft = target.offsetLeft;
target.initialOffsetTop = target.offsetTop;
target.addEventListener('mousedown', (e) => {
if (e.buttons === 1) {
Object.assign(target.style, {
transition: null,
zIndex: 10000,
position: 'relative'
});
target.isMouseDown = true;
offsetX = target.initialOffsetLeft + e.offsetX;
offsetY = target.initialOffsetTop + e.offsetY;
}
});
document.addEventListener('mouseup', (e) => {
e.preventDefault();
target.isMouseDown = false;
Object.assign(target.style, {
transition: 'all 0.5s ease',
zIndex: null,
left: '0',
top: '0'
});
});
document.addEventListener('mousemove', (e) => {
e.preventDefault();
if (target.isMouseDown) {
target.style.left = e.pageX - offsetX + 'px';
target.style.top = e.pageY - offsetY + 'px';
}
});
});
})();* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif
}
.draggable {
display: flex;
padding: 10px 12px;
margin-top: 0px;
margin-left: 0px;
margin-bottom: 11px;
border-radius: 5px;
margin-right: 5px;
background-color: #000000;
cursor: grab;
flex-grow: 1;
color: #ffffff;
border: 1px solid #6c757d;
}
.my-card-group {
margin-top: 30px;
background-color: #000000;
margin-right: 2%;
margin-left: 2%;
border: 1px solid #6c757d;
}<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="card group">
<div class="my-card-group">
<div class="card-body">
<div class="draggable">
Lorem ipsum dolor sit amet 1
</div>
<div class="draggable">
Lorem ipsum dolor sit amet 2
</div>
<div class="draggable">
Lorem ipsum dolor sit amet 3
</div>
</div>
</div>
</div>下面是我用.dragging个类替换Object.assign(...)条语句的方法:
(function() {
let targets = document.querySelectorAll('.draggable');
let offsetX;
let offsetY;
targets.forEach((target) => {
target.isMouseDown = false;
target.initialOffsetLeft = target.offsetLeft;
target.initialOffsetTop = target.offsetTop;
target.addEventListener('mousedown', (e) => {
if (e.buttons === 1) {
target.classList.add('dragging') // replaced with this
target.isMouseDown = true;
offsetX = target.initialOffsetLeft + e.offsetX;
offsetY = target.initialOffsetTop + e.offsetY;
}
});
document.addEventListener('mouseup', (e) => {
e.preventDefault();
target.isMouseDown = false;
target.classList.remove('dragging') // replaced with this
});
document.addEventListener('mousemove', (e) => {
e.preventDefault();
if (target.isMouseDown) {
target.style.left = e.pageX - offsetX + 'px';
target.style.top = e.pageY - offsetY + 'px';
}
});
});
})();
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif
}
.draggable {
display: flex;
padding: 10px 12px;
border-radius: 5px;
margin: 0 5px 11px 0;
background-color: #000000;
cursor: grab;
flex-grow: 1;
color: #ffffff;
border: 1px solid #6c757d;
transition: all 0.5s ease; /*added this*/
z-index: unset; /*added this*/
left: 0; /*added this*/
top: 0 /*added this*/
}
.dragging { /*added this*/
z-index: 10000;
position: relative;
transition: all 0s;
}
.my-card-group {
margin-top: 30px;
background-color: #000000;
margin-right: 2%;
margin-left: 2%;
border: 1px solid #6c757d;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="card group">
<div class="my-card-group">
<div class="card-body">
<div class="draggable">
Lorem ipsum dolor sit amet 1
</div>
<div class="draggable">
Lorem ipsum dolor sit amet 2
</div>
<div class="draggable">
Lorem ipsum dolor sit amet 3
</div>
</div>
</div>
</div>这打破了拖动的工作方式，因为left和top以及transition属性在移除.dragging之后仍然存在，下一次拖动.draggable中的任何属性时，它将从上一次拖动结束的位置开始，并具有设置为.dragging的过渡延迟.有没有一种方法可以使用类似的方法来实现初始行为？