为什么要为多个对象调用 drop 事件？答案

【问题标题】：Why is drop event being called for multiple objects?为什么要为多个对象调用 drop 事件？
【发布时间】：2019-11-19 00:10:58
【问题描述】：

当此代码用于内容脚本中的 chrome 扩展时，会创建两个可拖动元素，并且可以单独调整大小，但是当拖放它们时，它们最终会位于相同的位置。

使用日志语句，我确定仅对拖动时单击的元素调用 drag_start 事件，但始终为两个元素调用 drop 事件。我对 js 相当陌生，所以对任何形式的帮助/建议都很满意

function 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) + ',' + event.target.getAttribute('data-item'));
  }
  
function drag_over(event) {
    event.preventDefault();
    return false;
}
  
function drop(elem, event) {
    var offset = event.dataTransfer.getData("text/plain").split(',');
    elem.style.left = (event.clientX + parseInt(offset[0], 10)) + 'px';
    elem.style.top = (event.clientY + parseInt(offset[1], 10)) + 'px';
    event.preventDefault();
    return false;
}

class Note {
    
    constructor(x, y, sx, sy, doc){
        this.x = x;
        this.y = y;
        this.doc = doc;
        this.div = doc.createElement("div");
        this.note_text = doc.createElement("textarea");
        this.note_text.setAttribute("type", "text");
        this.note_text.style.display = "inline-block";
        this.note_text.style.webkitBoxSizing = "border-box";
        this.note_text.style.boxSizing = "border-box";
        this.note_text.style.width = "100%";
        this.note_text.style.height = "100%";
        this.note_text.style.resize = "none";
        this.div.appendChild(this.note_text);
        this.div.draggable = true;
        this.div.style.resize = "both";
        this.div.style.overflow = "auto";
        this.div.className = "dragme";
        this.div.style.zIndex = "99999";
        this.div.style.position = "absolute";
        this.div.style.overflowX = "hidden";
        this.div.style.overflowX = "hidden";
        this.div.style.overflowY = "hidden";
        this.div.style.left = "0";
        this.div.style.top = "0";
        this.div.style.width = "200px";
        this.div.style.background = "rgba(100, 255, 255,1)";
        this.div.style.border = "2px solid rgba (0,0,0,1)";
        this.div.style.borderRadius = "4px";
        this.div.style.padding = "8px";
        this.doc.body.append(this.div);
        

        this.div.addEventListener('dragstart', drag_start, false);
        doc.body.addEventListener('dragover', drag_over, false);
        doc.body.addEventListener('drop', (event) => drop(this.div, event), false);
    }

}

const note1 = new Note(0,0,0,0,document);
const note2 = new Note(0,0,0,0,document);

【问题讨论】：

试试event.preventDefault(); event.stopPropagation();
@AlbertoSinigaglia 不幸的是没有任何区别

标签： javascript html

【解决方案1】：

通过使用在“dragstart”事件上分配目标元素的单独变量来解决此问题。然后这个变量会在放置事件上重新定位，因此对于被拖动的元素而不是所有可拖动的元素都是唯一的。

【讨论】：