HTML5 拖放：防止从文档窗口边缘掉落？答案

【问题标题】：HTML5 drag and drop: prevent dropping off the edge of the document window?HTML5 拖放：防止从文档窗口边缘掉落？
【发布时间】：2015-01-05 14:08:55
【问题描述】：

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

;

【问题讨论】：

标签： css html drag-and-drop html5-draggable

【解决方案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）。

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

【讨论】：