javascript - 在拖动之前更改元素 href

Question

我正在创建一个扩展程序，允许我在某些不允许的网站中拖动照片链接。元素 (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>

在此输入验证码

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

<a href='javascript:void(0);'>Drag Me Into Another Window :)</a>