CODEWITHSUNDEEP
javascriptcssdrag-and-dropdom-events
Asim K T
Asim K T

Reputation: 18154

`ondragstart` changeable CSS styles

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.

sample-changed-values

Upvotes: 7

Views: 6636

Answers (2)

Andrii Muzalevskyi
Andrii Muzalevskyi

Reputation: 3329

As far as I know browser does following during dragstart:

  1. creates drag feedback image, simply - makes screenshot of element
  2. shows this image during d'n'd

It is intresting that some styles on drag target element, such as transform are ignored during drag feedback image creation (@scooterlord pointed already)

There are many libraries which resolve such issues, e.g. http://interactjs.io/

Native d'n'd API is still not standartized and have missing must-have features, so i advice you to use any library for that

Upvotes: 1

scooterlord
scooterlord

Reputation: 15369

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/

Upvotes: 2

Related Questions