HTML5拖放-不透明吗？

问题描述 投票：39回答：11

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

有没有办法使它成为opacity: 1;？

javascript html5 css3
11个回答
30
投票

似乎无法完成。拖动的元素将放入具有自己的，不透明度低于1的容器中。这意味着，虽然您可以降低拖动元素的不透明度，但不能使其高于封装元素的不透明度。

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

-4
投票
如果您使用的是JavaScript，则在处理dragStart事件的函数中，将样式的不透明度设置为1个示例：

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

-4
投票
建议，执行以下操作，为此，我正在使用jQuery，请尝试一下，然后再说不行，我们不是在这里给出答案，而是在为您指明正确的方向。

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

然后您需要拿出一些信息来告诉它已停止拖动并放到位，然后移至RemoveClass（'overdrag'）;
这并不难，所以我认为您应该能够做到。我要感谢@DonaldHuckle，因为这真的是他的解决方案，不是我的。
7
投票
正如其他人所建议的，您将需要某种机制来：

    隐藏被拖动的元素。
  1. 克隆要拖动的元素。
  2. 将克隆替换为要拖动的元素。
  3. 收听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函数以自定义手柄（例如，使用图像表示可拖动元素）。
    在您太兴奋之前，有几点要考虑：
  • 无法捕获“句柄释放”事件，请参阅解决方案的链接：How to get mouseup event after native drag event?。

    • 更新：

    我已经为WHATWG拖放机制https://github.com/gajus/pan编写了支持触摸的实现的库。
    3
    投票
    请参阅此工作fiddle

    我有一个解决方案，可以代替鬼影制作不透明图像，并且可以在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';});
    2
    投票
    如果您不是从Web外部（从操作系统）拖放元素，则可以通过实现自己的拖放来轻松解决此问题。有很多纯JavaScript拖放的示例，它们可以在HTML5环境中完美运行，并且可以完全由您自定义。

    answer :（使用旧方法）

    1
    投票
    对于那些对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是支持所需要的。
    0
    投票
    如前所述，这是由浏览器处理的->您无法更改此行为，但是如果您确实需要此效果，请尝试在鼠标按下时寻找鼠标移动（简称：拖动），检查选择了哪些元素并创建随鼠标光标移动的副本。看起来像是jQuery的理想工作；）

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

    0
    投票
    虽然这可能不是核心问题的真正解决方案，但我有一个可能的解决方案，至少我早些时候在一个GWT项目中对此进行了测试，并且它起作用了，所以我想它可能在本机JS中起作用以及我完全没有代码示例：

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

    2. 使克隆元素坚持鼠标的位置。删除克隆的事件还必须检查要拖动的元素是否位于原始元素可能被拖动到的区域上时，是否释放了鼠标。

    3. 如果为true，请删除克隆并将原始元素移至目标容器。

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

    0
    投票
    我认为透明度不是来自网页内容，而是来自浏览器和操作系统。如果要更改不透明度，则必须调整或修改浏览器和操作系统]
    0
    投票
    2012年以后的工作示例可以在chrome：// apps /下的chrome（您必须使用chrome）上查看。如果您想确切地知道他们是怎么做的，请打开dev tools（由于将鼠标左键用于自定义上下文菜单，因此将其设为strg + shift + i）并开始进行逆向工程（index.html中的7241行是一个很好的起点）。

    这里是一个简短的总结：

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

    最新问题
    © www.soinside.com 2019 - 2024. All rights reserved.