`ondragstart`可更改的CSS样式

Question

有哪些可更改的CSS样式对ondragstart函数调用有效？

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/

Answer 2

据我所知，浏览器在dragstart期间关注：

1. 创建拖动反馈图像，简单 - 制作元素的屏幕截图
2. 在d'd期间显示此图像

令人感兴趣的是拖动目标元素上的某些样式，例如transform在拖动反馈图像创建期间被忽略（@scooterlord已经指出）

---

有许多库可以解决这些问题，例如： http://interactjs.io/

Native d'n'd API仍然没有标准化，缺少必备功能，所以我建议您使用任何库