时间戳

首页 > 解决方案 > 在拖动之前更改元素href

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

问题描述

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

在此处输入代码

标签： javascripthtml

解决方案

我不认为这是可能的，但我知道什么。您所要做的就是使用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>

推荐阅读