パーツ番号 08-06-07 ・ JavaScript使用
ドラッグ可能アイコンカーソル
ドラッグ可能な要素にカーソルを合わせると案内ラベルが表示され、実際に移動もできます。並び替えUIの操作案内に活用できます。
プレビュー
ソースコード
HTML
<div class="d08-06-07-box">ドラッグ対象</div>
<span class="d08-06-07-cursor">ドラッグして移動</span>CSS
.d08-06-07{cursor:none;}
.d08-06-07-box{position:absolute;left:35%;top:40%;padding:14px 18px;background:#4a6cf7;color:#fff;border-radius:8px;font-size:13px;user-select:none;}
.d08-06-07-cursor{position:absolute;left:0;top:0;background:#222;color:#fff;font-size:11px;padding:3px 8px;border-radius:6px;pointer-events:none;opacity:0;transition:opacity .15s;white-space:nowrap;}JavaScript
(function(){
var root=document.currentScript.parentElement.querySelector('.d08-06-07');
var box=root.querySelector('.d08-06-07-box');
var label=root.querySelector('.d08-06-07-cursor');
var dragging=false, offX=0, offY=0;
root.addEventListener('mousemove',function(e){
var r=root.getBoundingClientRect();
var x=e.clientX-r.left, y=e.clientY-r.top;
label.style.transform='translate('+(x+14)+'px,'+(y+14)+'px)';
label.style.opacity=1;
if(dragging){
var bx=x-offX, by=y-offY;
bx=Math.max(0,Math.min(bx,r.width-box.offsetWidth));
by=Math.max(0,Math.min(by,r.height-box.offsetHeight));
box.style.left=bx+'px';
box.style.top=by+'px';
}
});
root.addEventListener('mouseleave',function(){label.style.opacity=0;dragging=false;});
box.addEventListener('mousedown',function(e){
dragging=true;
var br=box.getBoundingClientRect();
offX=e.clientX-br.left;
offY=e.clientY-br.top;
label.textContent='移動中...';
e.preventDefault();
});
root.addEventListener('mouseup',function(){
dragging=false;
label.textContent='ドラッグして移動';
});
})();クラス名 .d08-06-07 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。