HTML5拖放：防止掉落文档窗口的边缘？

Question

我正在研究一个简单的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)

Answer 1

您可以通过更改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基于您的计算，但它们会被约束，因此至少有一半的工具栏始终在屏幕上。

Fiddle

<小时/> 另一种解决方案是使用mousedown，mouseup和mousemove来模拟拖放行为。

在mousedown中，抓住工具栏的左侧和顶部坐标（变量x和y），宽度和高度（变量w和h），以及鼠标的pageX和pageY坐标（变量px和py）。 / p>

在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';

Fiddle

<强>代码：

(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();
    }
  });
})();