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

我正在开发一个简单的HTML5拖放元素。这是我的JSFIDLE：

我想编辑这个，这样就不可能把工具栏从页面的一半放下。这可能吗

换句话说，我希望防止工具栏从页面的一半位置掉落，如下所示：

以下是我的完整代码：

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)

---

)

您可以通过如下更改

拖放事件来限制工具栏的拖动范围：

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