`ondragstart` changeable CSS styles

Question

What are the changeable CSS styles valid for ondragstart function call?

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);
}

In above background and box-shadow are applying for the li item where transform is not working

Fiddle: https://jsfiddle.net/vnwx95mL/ (Thanks @Rayon)

NOTE: original element is transforming. But there is another one which is coming with the mouse. That have the issue.

Answer 1

This is a browser-specific issue and has nothing to do with the Javascript functionality used. Even if you apply the following class beforehand on your element and try to drag it, the draggable element is still without the applied styling.

.myClass {
  -webkit-transform:rotate(-3deg) skew(5deg);
  transform:rotate(-3deg) skew(5deg);
}

https://jsfiddle.net/gnxccyz7/

However, here is the solution to your problem: just create a child element inside your draggable element and apply the style on that. This is also working on 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/