HTML5 拖放 - 没有透明度？

Question

当我在页面上拖放一个元素时，该元素会变成“幻影”。基本上它会获得一些透明度值。

有没有办法让它opacity: 1;？

Answer 1

好像做不到。拖动的元素被放入具有它自己的容器中，不透明度低于 1。这意味着虽然您可以降低被拖动元素的不透明度，但您不能使其高于封装元素的不透明度。

可能可以覆盖此类元素的默认浏览器设置，但由于在拖动过程中没有向 DOM 添加任何内容，因此充其量是非常棘手的。

Answer 2

正如其他人所建议的，您将需要某种机制来：

1. 隐藏被拖动的元素。
2. 复制被拖动的元素。
3. 将克隆放置在被拖动元素的位置。
4. 侦听drag 事件以定位克隆元素。

在实践中，看起来像这样：

function Drag (subject) {
    var dative = this,
        handle,
        dragClickOffsetX,
        dragClickOffsetY,
        lastDragX,
        lastDragY;

    subject.draggable = true;

    dative.styleHandle(subject);

    subject.addEventListener('dragstart', function (e) {    
        handle = dative.makeHandle(subject);

        dragClickOffsetX = e.layerX;
        dragClickOffsetY = e.layerY;

        this.style.opacity = 0;
    });

    subject.addEventListener('drag', function (e) {
        var useX = e.x,
            useY = e.y;

        // Odd glitch
        if (useX === 0 && useY === 0) {
            useX = lastDragX;
            useY = lastDragY;
        }

        if (useX === lastDragX && useY === lastDragY) {
            return;
        }

        dative.translate(useX - dragClickOffsetX, useY - dragClickOffsetY, handle, subject);

        lastDragX = useX;
        lastDragY = useY;
    });

    subject.addEventListener('dragend', function (e) {
        this.style.opacity = 1;

        handle.parentNode.removeChild(handle);
    });
};

/**
 * Prevent the text contents of the handle element from being selected.
 */
Drag.prototype.styleHandle = function (node) {
    node.style['userSelect'] = 'none';
};

/**
 * @param {HTMLElement} subject
 * @return {HTMLElement}
 */
Drag.prototype.makeHandle = function (subject) {
    return this.makeClone(subject);
};

/**
 * Clone node.
 * 
 * @param {HTMLElement} node
 * @return {HTMLElement}
 */
Drag.prototype.makeClone = function (node) {
    var clone;

    clone = node.cloneNode(true);

    this.styleClone(clone, node.offsetWidth, node.offsetHeight);

    node.parentNode.insertBefore(clone, node);

    return clone;
};

/**
 * Make clone width and height static.
 * Take clone out of the element flow.
 *
 * @param {HTMLElement} node
 * @param {Number} width
 * @param {Nubmer} height
 */
Drag.prototype.styleClone = function (node, width, height) {
    node.style.position = 'fixed';
    node.style.zIndex = 9999;
    node.style.width = width + 'px';
    node.style.height = height + 'px';
    node.style.left = '-9999px';

    node.style.margin = 0;
    node.style.padding = 0;
};

/**
 * Used to position the handle element.
 * 
 * @param {Number} x
 * @param {Number} y
 * @param {HTMLElement} handle
 * @parma {HTMLElement} subject
 */
Drag.prototype.translate = function (x, y, handle, subject) {
    handle.style.left = x + 'px';
    handle.style.top = y + 'px';
};

从附加元素开始：

new Drag(document.querySelector('.element'));

您可以进行有效的拖放操作，完全控制可拖动元素的外观。在上面的示例中，我克隆了原始元素以将其用作句柄。您可以扩展Drag 函数来自定义句柄（例如使用图像来表示可拖动元素）。

在您过于兴奋之前，有几件事情需要考虑：

• WHATWG 拖放功能不适用于移动设备，HTML5 Drag & Drop for Mobile
• 无法捕获“句柄释放”事件，解决方法见链接：How to get mouseup event after native drag event?。

更新：

我已经为 WHATWG 拖放机制的触控实现编写了一个库，https://github.com/gajus/pan。

Answer 3

如果您不是从网页外部（从操作系统）拖放元素，那么您可以通过实现自己的拖放来轻松解决此问题。有许多纯 javascript 拖放示例，它们可以在 HTML5 环境中完美运行，并且可以完全由您自定义。

回答：（用老办法）

Answer 4

请看这个工作fiddle

我有一个解决方案可以制作一个不透明的图像来代替 ghost，它在 chrome 中运行良好。但它在 FF 中不起作用。我需要一些身体来帮助我让它在 Firefox 和其他浏览器中运行。 脚步 1.我们会制作自己的ghost图像，并将其设置为拖动图像。

document.addEventListener("dragstart", function(e) {
var img = document.createElement("img");
img.src = "img/hackergotchi-simpler.png";
e.dataTransfer.setDragImage(img, 5000, 5000);//5000 will be out of the window
}, false);

2.我们将克隆图像并将其附加到DOM ondrag

var crt,dragX,dragY;
function drag(ev) {
    crt = ev.target.cloneNode(true);
    crt.style.position = "absolute"; 
    document.body.appendChild(crt);
    ev.dataTransfer.setData("text", ev.target.id);
}

3.然后我们将克隆随着光标移动

    document.addEventListener("dragover", function(ev){
ev = ev || window.event;
dragX = ev.pageX; dragY = ev.pageY;
crt.style.left=dragX+"px";crt.style.top=  dragY+"px";
console.log("X: "+dragX+" Y: "+dragY);
}, false);

4.最后我们将让克隆可见性消失

   document.addEventListener("dragend", function( event ) {crt.style.display='none';});

Answer 5

对于那些（像我一样）对拖放 html5 实现感到失望的人，这里有一个基本的、普通的、跨浏览器、无缺陷且完全可定制的解决方案：

html:

<div class="dropzone"></div>
<div class="dropzone"></div>
<div class="draggable"></div>

js:

var currentElement, currentDropzone, offsetX, offsetY;
function findZoneUnderPoint(x, y) {
  var dropzones = preview.querySelectorAll(".dropzone");
  for (var i = 0; i < dropzones.length; i++) {
    var box = dropzones[i].getBoundingClientRect();
    if (x > box.left && x < box.right && y > box.top && y < box.bottom) {
      return dropzones[i];
    }
  }
}
function onMouseDown(event) {
  currentElement = event.target.closest(".draggable");
  if (currentElement) {
    var box = currentElement.getBoundingClientRect();
    offsetX = event.clientX - box.x;
    offsetY = event.clientY - box.y;
    currentElement.classList.add("drag");           
    currentElement.style.width = box.width.toFixed()+"px";
    currentElement.style.height = box.height.toFixed()+"px";    
    currentElement.style.left = (event.clientX - offsetX) + "px";
    currentElement.style.top = (event.clientY - offsetY) + "px";
    currentElement.style.position = "fixed";
    currentElement.style.zIndex = "999";
    this.addEventListener("mousemove", onMouseMove);
    this.addEventListener("mouseup", onMouseUp);
  }
}
function onMouseMove(event) {
  currentElement.style.left = (event.clientX - offsetX) + "px";
  currentElement.style.top = (event.clientY - offsetY) + "px";
  var dropzone = findZoneUnderPoint(event.clientX, event.clientY);
  if (dropzone !== currentDropzone) {
    if (dropzone) {
      // -> drag enter zone
    }
    if (currentDropzone) {
      // -> drag leave zone
    }
    currentDropzone = dropzone;
  }
}
function onMouseUp(event) {
  var dropzone = findZoneUnderPoint(event.clientX, event.clientY);
  if (dropzone) {
    // -> drag complete
  } else {
    // -> drag canceled
  }
  currentElement = null;
  document.removeEventListener("mouseup", onMouseUp);
  document.removeEventListener("mousemove", onMouseMove);
}
document.addEventListener("mousedown", onMouseDown);

注意：需要Element.closest() polyfill 来支持ie。

Answer 6

截至 2021 年，您无需克隆该元素。 浏览器创建一个半透明的克隆，跟随鼠标指针拖动事件。同时原始拖动的项目保持不变，没有任何变化。

如果您希望显示 原始元素 被拖动到 跟随鼠标 指针，那么这里就是诀窍。

设置：

<!- HTML Code Sample ->
<div draggable="true" 
    ondragstart="onDragStart(event)" ondrag="onDrag(event)"
                    ondragend="onDragEnd(event)">

<!- JS Code Sample ->
var dx = 0, dy = 0, draggedItem = undefined;
function onDragStart(e) {}
function onDrag(e) {}
function onDragEnd(e) {}

第 1 步： 将拖动项的 (x, y) 坐标与鼠标指针坐标之间的差值保存为 delta。

function onDragStart(e) {
    draggedItem = e.target;
    dx = e.clientX - draggedItem..getBoundingClientRect().x;
    dy = e.clientY - draggedItem..getBoundingClientRect().y;
    draggedItem.style.position = 'absolute';
}

第 2 步： 用鼠标指针的 (x, y) 坐标更新拖动项的位置。记得减去增量。

function onDrag(e) {
    draggedItem.style.left = e.ClientX - dx;
    draggedItem.style.top = e.ClientY - dy;
}

第 3 步： 取决于是为拖动的项目保留新位置还是运行一些自定义逻辑。

function onDragEnd(e) {

    if('retain new position ???'){
        draggedItem.style.left = e.ClientX - dx;
        draggedItem.style.top = e.ClientY - dy;
    } else {
        draggedItem.style.position = 'static';

        // Add your custom logic to handle drag completion
    }

    // Clear temporary data
    draggedItem = undefined;
    dx = dy = 0;
}

这将使原始拖动的项目跟随半透明的拖动克隆，从而克服了不透明的影响。 onDrag 事件每 350 毫秒触发一次，并创建一个不错的可视化效果。

Answer 7

如前所述，这是由浏览器处理的 -> 您无法更改此行为，但如果您确实需要此效果，请尝试在鼠标按下时寻找鼠标移动（简称：拖动），检查选择了什么元素并动态创建一个跟随鼠标光标的副本。看起来是 jQuery 的理想工作；）

但如果您不是非常需要它，我不会尝试更改浏览器的默认值，因为人们已经习惯了它，并且如果某些东西以另一种（未知）方式运行时可能会感到困惑

Answer 8

虽然这可能不是核心问题的真正解决方案，但我知道什么可能有效，至少我前段时间在我的一个 GWT 项目中测试过它并且它有效，所以我猜它可能在本机中有效JS 虽然我没有代码示例：

1. 不使用拖动功能，而是在要拖动的元素的原始位置创建一个等于应该拖动的元素的新元素。现在应该使要拖动的原始元素不可见。实现一个逻辑来恢复原始元素并在不再按下鼠标时立即删除克隆。

2. 使克隆元素粘在鼠标的位置上。删除克隆的事件还必须检查当要拖动的元素位于可以拖动原始元素的区域上时是否释放鼠标。

3. 如果为 true，则移除克隆并将原始元素移动到目标容器中。

在 CSS 和 JS 中肯定也有很多调整工作要做，但这可能是压倒 JS 标准的一个技巧。

Answer 9

我认为透明度不是来自网络内容，而是来自浏览器和操作系统。 如果你想改变不透明度，你必须调整或破解浏览器和操作系统

Answer 10

可以在“chrome://apps/”下的 chrome（您必须使用 chrome）上查看 2012 年的工作示例。如果您想确切地知道他们是如何做到的，请打开dev tools（strg + shift + i，因为左键单击用于自定义上下文菜单）并开始逆向工程（index.html 中的第 7241 行是一个很好的起点）。

这是一个简短的总结：

他们克隆了dragstart 上的拖动元素，将其添加到某个顶级容器中，并将其定位到drag 上的光标处。为了避免将事件阻塞到实际元素，他们使用pointer-events: none;为克隆设置样式

Answer 11

在 Dragstart 上使用 event.dataTransfer.setDragImage(new Image(), 0, 0); 隐藏原始图像。 onDrag 获取鬼图，更新位置使用event.pageX,event.pageY

Answer 12

请不要问我为什么会这样，但如果你将不透明度设置为 0.99999 而不是 1 它对我有用。 我真的很好奇为什么，如果有人知道，请发表您的想法。

Answer 13

如果您使用的是 JavaScript，那么在处理 dragStart 事件的函数中包括将样式不透明度设置为 1 示例：

function dragStartHandler(e) {
   this.style.opacity = '1.0';
}

Answer 14

建议，请执行以下操作，现在我正在使用 jQuery，尝试一下，在说什么不起作用之前，我们不是在这里给出答案，而是在这里为您指明正确的方向。

function dragStartHandler(e) { 
   $("span.{CLASS}")addClass('overdrag'); 
} 

然后你需要拿出 away 告诉它已经停止拖动并放置到位，然后到 RemoveClass('overdrag');

这并不难，所以我认为你应该能够做到。我要感谢@DonaldHuckle，因为这真的是他的解决方案，不是我的。