← 動的パーツギャラリーへ戻る

パーツ番号 08-06-07 ・ JavaScript使用

ドラッグ可能アイコンカーソル

ドラッグ可能な要素にカーソルを合わせると案内ラベルが表示され、実際に移動もできます。並び替えUIの操作案内に活用できます。

dragjs

プレビュー

ソースコード

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 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。