`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＆＃39; n＆＃39; d
期间显示此图像

在拖动反馈图像创建过程中忽略了拖动目标元素上的某些样式（例如transform）（@scooterlord已经指出）

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

本机d的API仍然没有标准化且缺少必备功能，因此我建议您使用任何库