Javascript 在页面上移动div，如果div出现在另一个带有本机JS的页面中，则删除div

有这个。如果你打开它，你会看到一个可移动的div，但我还想添加以下内容：如果你将这个div移动到“垃圾桶”，那么这个可移动的div必须消失（你把它放进垃圾桶）。提前谢谢

我的div移动代码：

var selected = null, // Object of the element to be moved
    x_pos = 0, y_pos = 0, // Stores x & y coordinates of the mouse pointer
    x_elem = 0, y_elem = 0; // Stores top, left values (edge) of the element

// Will be called when user starts dragging an element
function _drag_init(elem) {
    // Store the object of the element which needs to be moved
    selected = elem;
    x_elem = x_pos - selected.offsetLeft;
    y_elem = y_pos - selected.offsetTop;
}

// Will be called when user dragging an element
function _move_elem(e) {
    x_pos = document.all ? window.event.clientX : e.pageX;
    y_pos = document.all ? window.event.clientY : e.pageY;
    if (selected !== null) {
        selected.style.left = (x_pos - x_elem) + 'px';
        selected.style.top = (y_pos - y_elem) + 'px';
    }
}

// Destroy the object when we are done
function _destroy() {
    selected = null;
}

// Bind the functions...
document.getElementById('draggable-element').onmousedown = function () {
    _drag_init(this);
    return false;
};

document.onmousemove = _move_elem;
document.onmouseup = _destroy;

下面是您所要求的快速（非完全）实现

我创建了一个

函数isInTrash（element）

，该函数获取一个元素，如果它在垃圾桶中，则返回true

我做的检查是，保存可拖动元素的鼠标指针是否位于垃圾区域内

当元素在拖动时与垃圾桶重叠时，还应向用户添加某种反馈

您可以在

函数中调用
isInTrash
函数_move\u elem（e）

并更改可拖动元素的颜色

下面是反馈的附加功能

以下是您所要求的快速（非完全）实现

我创建了一个

函数isInTrash（element）

，该函数获取一个元素，如果它在垃圾桶中，则返回true

我做的检查是，保存可拖动元素的鼠标指针是否位于垃圾区域内

当元素在拖动时与垃圾桶重叠时，还应向用户添加某种反馈

您可以在

函数中调用
isInTrash
函数_move\u elem（e）

并更改可拖动元素的颜色

下面是反馈的附加功能

---

如果垃圾箱中的面积超过50%，则将其丢弃

查找垃圾和拖曳元素的x、y坐标

找到它们之间的重叠区域

如果面积超过div面积的一半，则将其隐藏

代码

参考资料：

---

如果垃圾箱中的面积超过50%，则将其丢弃

查找垃圾和拖曳元素的x、y坐标

找到它们之间的重叠区域

如果面积超过div面积的一半，则将其隐藏

代码

参考资料：

---

用于工作溶液检查

为了解决这个问题，我采用了建议使用的重叠函数

功能检查重叠（元素1、元素2）{
var rect1=element1.getBoundingClientRect（）；
var rect2=element2.getBoundingClientRect（）；
返回！（rect1.rightrect2.right | |
rect1.bottomrect2.bottom）
}
//完成后，请销毁该对象
函数_destroy（）{
//检查当前是否选择了某个图元
如果（选定）{
//检查所选项目是否与垃圾桶元素重叠
if（选中重叠（选中，document.getElementById（'trash'））{
//从DOM中删除选定项
selected.parentElement.removeChild（选中）；
}
}
选中=空；
}

用于工作溶液检查

为了解决这个问题，我采用了建议使用的重叠函数

功能检查重叠（元素1、元素2）{
var rect1=element1.getBoundingClientRect（）；
var rect2=element2.getBoundingClientRect（）；
返回！（rect1.rightrect2.right | |
rect1.bottomrect2.bottom）
}
//完成后，请销毁该对象
函数_destroy（）{
//检查当前是否选择了某个图元
如果（选定）{
//检查所选项目是否与垃圾桶元素重叠
if（选中重叠（选中，document.getElementById（'trash'））{
//从DOM中删除选定项
selected.parentElement.removeChild（选中）；
}
}
选中=空；
}

您希望何时将其删除？当光标位于“trash”div上方或两个div重叠时？当我的可移动div位于“trash”上方时@PostCrafter您希望何时删除它？当光标位于“trash”div上方或两个div重叠时？当我的可移动div位于“trash”上方时@后椽

function getOffset(el) {
  var _x = 0;
  var _y = 0;
  while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
    _x += el.offsetLeft - el.scrollLeft;
    _y += el.offsetTop - el.scrollTop;
    el = el.offsetParent;
  }
  return {
    top: _y,
    left: _x
  };
}

function shouldTrash() {
  var dragged = getOffset(document.getElementById('draggable-element'));
  var x11 = dragged.left;
  var x12 = dragged.left + 100;
  var y11 = dragged.top;
  var y12 = dragged.top + 100;
  var trashed = getOffset(document.getElementById('trash'));
  var x21 = trashed.left;
  var x22 = x21 + 100;
  var y21 = trashed.top;
  var y22 = y21 + 100;
  x_overlap = Math.max(0, Math.min(x12, x22) - Math.max(x11, x21));
  y_overlap = Math.max(0, Math.min(y12, y22) - Math.max(y11, y21));
  overlapArea = x_overlap * y_overlap;
  if (overlapArea > 100 * 50) {
    document.getElementById('draggable-element').style.display = 'none';
  }
}

function checkOverlap(element1, element2) {
    var rect1 = element1.getBoundingClientRect();
    var rect2 = element2.getBoundingClientRect();
    return !(rect1.right < rect2.left || 
                rect1.left > rect2.right || 
                rect1.bottom < rect2.top || 
                rect1.top > rect2.bottom)
}

// Destroy the object when we are done
function _destroy() {
    // check if an element is currently selected
    if (selected) {
        // check if the selected item overlaps the trash element
        if (checkOverlap(selected, document.getElementById('trash'))) {
            // remove the selected item from the DOM
            selected.parentElement.removeChild(selected);
        }
    }
    selected = null;
}