拖动之前更改元素的 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>

- Rafat Rifaie

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>

- quicVO

---

请注意，单击链接不会产生任何效果。只有将其拖到新窗口中才会产生影响。 - quicVO