`ondragstart`可更改的CSS样式

Question

有效的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

小提琴:https://jsfiddle.net/vnwx95mL/(谢谢@Rayon)

注意:原始元素正在转换.但还有另外一个随鼠标一起出现.这有问题.

Answer 1

这是一个特定于浏览器的问题，与所使用的 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);
}

https://jsfiddle.net/sbh4j9ag/