对于 ondragstart
函数调用有效的可变 CSS 样式有哪些?
HTML
<li draggable="true" ondragstart="drag(event)" id="id"> Item </li>
CSS
function drag(ev) {
ev.target.style.background = '#f1f1f1';
ev.target.style.boxShadow = '2px 2px 1px 1px rgba(144, 144, 144, 0.39)';
ev.target.style.transform = 'rotate(-3deg) skew(5deg)';
ev.dataTransfer.setData("idOfItem", ev.target.id);
}
在上面的 background
和 box-shadow
正在申请 li
项,其中 transform
不起作用
fiddle :https://jsfiddle.net/vnwx95mL/ (感谢@Rayon)
注意:原始元素正在转换。但是还有另一个随鼠标而来。那有问题。
最佳答案
这是一个特定于浏览器的问题,与所使用的 Javascript 功能无关。即使您预先在您的元素上应用以下类并尝试拖动它,可拖动元素仍然没有应用样式。
.myClass {
-webkit-transform:rotate(-3deg) skew(5deg);
transform:rotate(-3deg) skew(5deg);
}
https://jsfiddle.net/gnxccyz7/
但是,这里是您的问题的解决方案:只需在可拖动元素内创建一个子元素并在其上应用样式。这也适用于 Chrome!
Javascript:
function drag(ev) {
ev.target.className = 'myClass';
ev.dataTransfer.setData("idOfItem", ev.target.id);
}
CSS:
.myClass span {
display:block;
background:#f1f1f1;
-webkit-box-shadow:box-shadow:2px 2px 1px 1px rgba(144, 144, 144, 0.39);
box-shadow:2px 2px 1px 1px rgba(144, 144, 144, 0.39);
-webkit-transform:rotate(-3deg) skew(5deg);
transform:rotate(-3deg) skew(5deg);
}
关于javascript - `ondragstart` 可变CSS样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44581466/