css - HTML5 拖放 : prevent dropping off the edge of the document window?

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 ).

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