对于ondragstart函数调用有哪些可更改的CSS样式有效？
<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,0.39)';
ev.target.style.transform = 'rotate(-3deg) skew(5deg)';
ev.dataTransfer.setData("idOfItem",ev.target.id);
}
在上面的背景和Box-shadow正在申请变换不起作用的li项目
小提琴：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,0.39);
Box-shadow:2px 2px 1px 1px rgba(144,0.39);
-webkit-transform:rotate(-3deg) skew(5deg);
transform:rotate(-3deg) skew(5deg);
}
