CSS `ondragstart` replaceable styles

Question

What CSS ondragstart styles are valid for calling the ondragstart function?

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 the above, background and box-shadow are applied to the li element where transform does not work

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

NOTE: the original item is converted. But there is another one that comes with the mouse. This is problem.

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 to your element and try to drag it, the drag element will still not be applied to the style.

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

https://jsfiddle.net/gnxccyz7/

However, here is a solution to your problem: just create a child inside your drag and drop element and apply a style to it. It also works 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/

Answer 2

As far as I know, the browser performs the following dragstart operations:

• creates a feedback image with feedback, simply - takes a screenshot of the element
• shows this image during d'n'd

Interestingly, some styles on the drag and drop target, such as transform , are ignored when creating the feedback image with the reverse path (@scooterlord already pointed out)

---

There are many libraries that solve such problems, for example. http://interactjs.io/

The Native d'n'd API is still not standardized and has no required functions, so I advise you to use any library for this