在拖动之前更改元素href答案

【问题标题】：Change Element href Right Before Drag在拖动之前更改元素href
【发布时间】：2021-03-17 03:45:47
【问题描述】：

我正在创建一个扩展程序，允许我在某些不允许的网站中拖动照片链接。 (photoCell) 元素的默认 href 为 "javascript://"，并有一个子元素 (photo) 保存图像。

我希望能够将父元素的 href 更改为子图像的 src，所以当我拖动时，我拖动子图像的 URL . （如果我在没有拖动监听器的情况下这样做，但是当我点击一个元素时，它会加载图像而不是预期的 javascript 函数）。所以我需要在拖动完成后将href改回“javascript://”。

但是，即使 href 更改了拖动的 URL，仍然是 "javascript://"

function dragstart() {
    this.href = this.children[0].src;
}

function dragend() {
    this.href = "javascript://";
}

function doForPicturedesk() {
    var gallaryCells = document.getElementsByClassName("gallery-cell");
    for (var i = 0; i < gallaryCells.length; i++) {
        var gallaryCell = gallaryCells[i];
        var photoCell = element.children[0];    
        photoCell.addEventListener("dragstart", dragstart);
        photoCell.addEventListener("dragend",dragend);
    }
}

这是一个 HTML 示例

<div class="gallery-cell jg-entry entry-visible" style="width: 534px; height: 345px; top: 10px; left: 10px;">
    <a href="javascript://" onclick="openPictureDetail('343563491-516813675371465101')" class="gallery-cell__link gallery-cell__image--hoverable">
              <img id="thumb_343563491-516813675371465101" class="gallery-cell__image " src="/bild-disp/diasdb/thumbnailextl.action?ref=343563491-516813675371465101&amp;w=false" onerror="correctMissing(this, '343563491-516813675371465101');" style="width: 534px; height: 356px; margin-left: -267px; margin-top: -178px;">
    </a>
</div>

在此处输入代码

【问题讨论】：

标签： javascript html

【解决方案1】：

我不认为这是可能的，但我知道什么。您所要做的就是使用dataTransfer.setData 来实现您的目标。在下面试试：

let anchor = document.querySelector('a');
anchor.ondragstart = function(event) {
  let urlWeWant = 'https://www.example.com';
  event.dataTransfer.types.forEach(type => {
  
  //Note that all you HAVE to do for this to work is:
  //event.dataTransfer.setData(type, urlWeWant);
  //BUT, I think checking the type and replace HTML is better
  
    if (type.includes('html')) {
      let clone = event.target.cloneNode(true);
      clone.href = urlWeWant;
      let dataHTML = clone.outerHTML
      event.dataTransfer.setData(type, dataHTML);
    } else {
      event.dataTransfer.setData(type, urlWeWant);
    };
  });
};

&lt;a href='javascript:void(0);'&gt;Drag Me Into Another Window :)&lt;/a&gt;

【讨论】：

请注意，单击链接不会执行任何操作。只有拖入新窗口才会生效。