0

私は単純な HTML5 ドラッグ アンド ドロップ要素に取り組んでいます。ここに私の JSFiddle があります: http://jsfiddle.net/e4ogxcum/3/

これを編集して、ツールバーをページの半分にドロップできないようにしたいと思います。これは可能ですか？

つまり、次のように、ツールバーがページの途中でドロップされるのを防ぎたいと思います。

ここに画像の説明を入力

これが私のコードの全文です：

function drag_start(event) {
    console.log('drag_start', event);
    var style = window.getComputedStyle(event.target, null);
    event.dataTransfer.setData("text/plain",
    (parseInt(style.getPropertyValue("left"),10) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top"),10) - event.clientY));
} 
function drag_over(event) { 
    event.preventDefault(); 
    return false; 
} 
function drop(event) { 
    event.preventDefault();
    var offset = event.dataTransfer.getData("text/plain").split(',');
    dm.style.left = (event.clientX + parseInt(offset[0],10)) + 'px';
    dm.style.top = (event.clientY + parseInt(offset[1],10)) + 'px';
    return false;
} 

var dm = document.getElementById('taskbar'); 
dm.addEventListener('dragstart',drag_start,false); 
document.body.addEventListener('dragover',drag_over,false); 
document.body.addEventListener('drop',drop,false)

;

4

1 に答える 1

0

drop次のようにイベントを変更することで、ツールバーのドラッグ範囲を制限できます。

function drop(event) { 
  event.preventDefault();
  var offset = event.dataTransfer.getData("text/plain").split(',');

  var x= event.clientX + parseInt(offset[0],10);
  var y= event.clientY + parseInt(offset[1],10);
  var w= dm.offsetWidth;
  var h= dm.offsetHeight;

  dm.style.left= Math.min(window.innerWidth -w/2,Math.max(-w/2,x))+'px';
  dm.style.top = Math.min(window.innerHeight-h/2,Math.max(-h/2,y))+'px';

  return false;
}

xおよびy計算に基づいていますが、ツールバーの少なくとも半分が常に画面上に表示されるように制限されています。

フィドル

mousedown別の解決策は、 、mouseup、および を使用してドラッグ アンド ドロップ動作をシミュレートすることmousemoveです。

でmousedown、ツールバーの左と上の座標 (変数 x と y)、幅と高さ (変数 w と h)、およびマウスの pageX と pageY 座標 (変数 px と py) を取得します。

でmousemove、新しい左と上の座標を計算し、少なくとも要素の半分が常に画面に表示されるようにそれらを制限します。

newx= x+(ev.pageX-px);
newy= y+(ev.pageY-py);
this.style.left= Math.min(window.innerWidth -w/2,Math.max(-w/2,newx))+'px';
this.style.top = Math.min(window.innerHeight-h/2,Math.max(-h/2,newy))+'px';

フィドル

コード：

(function() {
  var tb= document.querySelector('aside'),
      moving,
      w, h,
      x, y,
      newx, newy,
      px,py;

  tb.addEventListener('mousedown',function(ev) {
    this.style.cursor= 'move';
    x= tb.offsetLeft;
    y= tb.offsetTop;
    w= tb.offsetWidth;
    h= tb.offsetHeight;
    px= ev.pageX;
    py= ev.pageY;
    moving= true;
  });

  document.addEventListener('mouseup',function() {
    tb.style.cursor= '';
    moving= false;
  });

  tb.addEventListener('mousemove',function(ev) {
    if(moving) {
      newx= x+(ev.pageX-px);
      newy= y+(ev.pageY-py);
      this.style.left= Math.min(window.innerWidth -w/2,Math.max(-w/2,newx))+'px';
      this.style.top = Math.min(window.innerHeight-h/2,Math.max(-h/2,newy))+'px';
    }
  });

  document.addEventListener('mousemove', function(ev) {
    if(moving) {
      ev.preventDefault();
    }
  });
})();
于 2015-01-05T15:26:50.407 に答える