同じ仕組みでドラッグ開始時に、ドラッグ元の要素を非表示にすることもできます。ドラッグ元の要素を非表示にするコードはこちらの記事を参照してください。
.DragItem {
margin-top: 2px;
border: 1px solid #0073c6;
height:32px;
width:256px;
cursor: move;
}
.DragItem.active {
border: 1px solid #ff6a00;
transition: transform ease-out 0.25s;
transform: scale(0.7);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="DragCssStyle4.css" />
<script type="text/javascript">
function load() {
var elem = document.getElementById('elem1');
elem.addEventListener('dragstart', onDragStart, false);
elem.addEventListener('dragend', onDragEnd, false);
elem = document.getElementById('elem2');
elem.addEventListener('dragstart', onDragStart, false);
elem.addEventListener('dragend', onDragEnd, false);
elem = document.getElementById('elem3');
elem.addEventListener('dragstart', onDragStart, false);
elem.addEventListener('dragend', onDragEnd, false);
elem = document.getElementById('elem4');
elem.addEventListener('dragstart', onDragStart, false);
elem.addEventListener('dragend', onDragEnd, false);
elem = document.getElementById('elem5');
elem.addEventListener('dragstart', onDragStart, false);
elem.addEventListener('dragend', onDragEnd, false);
}
function onDragStart(e) {
e.target.classList.add('active');
}
function onDragEnd(e) {
e.target.classList.remove('active');
}
</script>
</head>
<body onload="load();">
<div id="Frame">
<div id="elem1" class="DragItem" draggable="true">アイテム 01</div>
<div id="elem2" class="DragItem" draggable="true">アイテム 02</div>
<div id="elem3" class="DragItem" draggable="true">アイテム 03</div>
<div id="elem4" class="DragItem" draggable="true">アイテム 04</div>
<div id="elem5" class="DragItem" draggable="true">アイテム 05</div>
</div>
</body>
</html>
.DragItem.active {
border: 1px solid #ff6a00;
transition: transform ease-out 0.25s;
transform: scale(0.7);
}
.DragItem.active
で枠の色が設定されているため、transitionを利用して別の枠色には変更できません。この場合は、Animation と keyframes を利用してアニメーションで枠の色を変えることで実現できます。.DragItem {
margin-top: 2px;
border: 1px solid #0073c6;
height: 32px;
width: 256px;
cursor: move;
}
.DragItem.active{
border: 1px solid #ff6a00;
animation: anm 0.1s ease 0s 1 normal forwards running;
}
@keyframes anm{
0% {
border: 1px solid #ff6a00;
}
100% {
border: 1px solid #C0C0C0;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="DragCssStyle5.css" />
<script type="text/javascript">
function load() {
var elem = document.getElementById('elem1');
elem.addEventListener('dragstart', onDragStart, false);
elem.addEventListener('dragend', onDragEnd, false);
elem = document.getElementById('elem2');
elem.addEventListener('dragstart', onDragStart, false);
elem.addEventListener('dragend', onDragEnd, false);
elem = document.getElementById('elem3');
elem.addEventListener('dragstart', onDragStart, false);
elem.addEventListener('dragend', onDragEnd, false);
elem = document.getElementById('elem4');
elem.addEventListener('dragstart', onDragStart, false);
elem.addEventListener('dragend', onDragEnd, false);
elem = document.getElementById('elem5');
elem.addEventListener('dragstart', onDragStart, false);
elem.addEventListener('dragend', onDragEnd, false);
}
function onDragStart(e) {
e.target.classList.add('active');
}
function onDragEnd(e) {
e.target.classList.remove('active');
}
</script>
</head>
<body onload="load();">
<div id="Frame">
<div id="elem1" class="DragItem" draggable="true">アイテム 01</div>
<div id="elem2" class="DragItem" draggable="true">アイテム 02</div>
<div id="elem3" class="DragItem" draggable="true">アイテム 03</div>
<div id="elem4" class="DragItem" draggable="true">アイテム 04</div>
<div id="elem5" class="DragItem" draggable="true">アイテム 05</div>
</div>
</body>
</html>
.DragItem.active{
border: 1px solid #ff6a00;
animation: anm 0.1s ease 0s 1 normal forwards running;
}
@keyframes anm{
0% {
border: 1px solid #ff6a00;
}
100% {
border: 1px solid #C0C0C0;
}
}