我有一个用 clip-path 绘制的自定义形状的元素.使用 html5 时 draggable属性，在拖动的图像上忽略剪辑路径。有没有办法让剪辑路径在图像上工作？使用 clip-path 轻松绘制自定义形状(没有 hacky ::before 和 ::after 技巧)的替代方法也可能是一个可以接受的答案。
( Beware, browser support is limited )
#foo {
padding: 0 1ch;
clip-path: circle(50%);
color: white;
background: indianred;
}<label id="foo" draggable="true">bar</label>要复制运行代码段，请单击栏并拖动。问题截图:
最佳答案
如果没有看到更多的代码，很难说出了什么问题，但这里有一个使用剪辑路径的可拖动元素的工作示例。我刚刚修改了 w3schools 的一些代码，所以这不是我的原创作品。 https://codepen.io/zenRyoku/pen/EzWmmP
//Make the DIV element draggagle:
dragElement(document.getElementById("mydiv"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
/* if present, the header is where you move the DIV from:*/
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
} else {
/* otherwise, move the DIV from anywhere inside the DIV:*/
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
}
}body {
height: 100%
}
#mydiv {
position: absolute;
height: 100px;
width: 100px;
z-index: 9;
background-color: plum;
text-align: center;
clip-path: circle();
cursor: move;
}<!DOCTYPE html>
<html>
<body>
<div id="mydiv"></div>
</body>
</html>但是我做了另一个例子，其中元素被拖到另一个容器中，剪辑路径在拖动时消失并在 mouseup 时返回。也许这会复制您的问题？在这种情况下，可能需要像上面那样实现 Javascript 或制作具有所需形状的 SVG 并将其用作可拖动元素的背景。 https://codepen.io/zenRyoku/pen/XwMgmM
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}body {
height: 100%;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#drop {
width: 200px;
height: 200px;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #aaaaaa;
}
#drag1 {
padding: 2rem;
background: pink;
clip-path: circle();
}
#drag2 {
padding: 2rem;
background: plum;
clip-path: circle();
}<!DOCTYPE HTML>
<html>
<body onload="makeDraggable(evt)">
<div class="container">
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<label id="drag1" draggable="true" ondragstart="drag(event)"></label>
<div id="drag2" draggable="true" ondragstart="drag(event)"></div>
</div>
</body>
</html> 关于html - 使剪辑路径与可拖动图像一起使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56158487/