javascript - `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 不起作用

fiddle :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/