Javascript HTML5拖放-没有透明度？

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

---

有没有办法使它

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

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

看起来这是不可能的。被拖动的元素被放入具有自己的不透明度（低于1）的容器中。这意味着，虽然可以降低拖动元素的不透明度，但不能使其高于封装元素的不透明度

可能会覆盖此类元素的默认浏览器设置，但由于在拖动过程中没有向DOM添加任何内容，因此这充其量是非常棘手的。
如前所述，这是由浏览器处理的->您无法更改此行为，但如果确实需要此效果，请尝试在鼠标按下时查找鼠标移动（简短：拖动），检查所选元素，并在鼠标光标后动态创建副本。看起来是jQuery的理想工作；）

但是，如果您不迫切需要它，我不会尝试更改浏览器的默认值，因为人们已经习惯了它，如果某些东西以另一种（未知）方式运行，我可能会感到困惑
尽管这可能不是核心问题的真正解决方案，但我知道什么可能有效，至少我不久前在我的一个GWT项目中对此进行了测试，并且成功了，所以我想它可能在原生JS中也能工作，尽管我没有代码示例：

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

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

如果为true，请删除克隆并将原始元素移动到目标容器中

CSS和JS中肯定还有很多调整工作要做，但这可能是一个压倒JS标准的把戏。
我认为透明度不是来自web内容，而是来自浏览器和操作系统。
如果要更改不透明度，必须调整或破解浏览器和操作系统。如果没有从网页外部（从操作系统）拖放元素，则可以通过实现自己的拖放轻松解决此问题。有许多纯javascript拖放的例子，它们将在HTML5环境中完美运行，并且完全可以由您自定义

回答：（使用老方法）
建议，做以下操作，现在我使用jQuery，尝试一下，在说某些东西不起作用之前，我们不是来给出答案的，而是来为您指出正确的方向的

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

然后，您需要拿出一个away来告诉它已经停止拖航并降到位置，然后移除类（“overdrag”）

这并不难做到，所以我认为你应该能够做到。我要感谢@DonaldHuckle，因为这确实是他的解决方案，而不是我的。
正如其他人所建议的，您将需要某种机制来：

隐藏正在拖动的图元
对正在拖动的元素进行克隆
将克隆放在正在拖动的元素的位置
收听
拖动事件以定位克隆元素

实际上，看起来是这样的：

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'));

您可以使用拖放功能完全控制可拖动元素的外观。在上面的示例中，我克隆了原始元素以将其用作句柄。您可以扩展
拖动
功能以自定义手柄（例如，使用图像表示可拖动的元素）

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


WHATWG拖放不适用于mobile
无法捕获“句柄释放”事件，请参阅解决方案的链接：

更新：

<!- 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) {}

我已经为WHATWG拖放机制的触控功能实现编写了一个库。
请查看此工作

我有一个在ghost中制作不透明图像的解决方案，它在chrome中运行良好。但在FF中不起作用。我需要一些人帮助我在Firefox和其他浏览器中工作。
台阶
1.我们将制作自己的鬼图像，并将其设置为拖动图像

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

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

html:



js:

var currentElement、currentDropzone、offsetX、offsetY；
函数findZoneUnderPoint（x，y）{
var dropzone=preview.querySelectorAll（“.dropzone”）；
对于（var i=0；ibox.left&&xbox.top&&yvar 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);

<!- 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) {}

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

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

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