`ondragstart` kiểu CSS có thể thay đổi

Question

Kiểu CSS có thể thay đổi hợp lệ cho cuộc gọi chức năng ondragstart là gì?

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

Trong trên background và box-shadow đang áp dụng cho li mục nơi transform không được làm việc

Fiddle: https://jsfiddle.net/vnwx95mL/ (Cảm ơn @Rayon)

LƯU Ý: phần tử gốc đang chuyển đổi. Nhưng có một cái khác đi kèm với con chuột. Điều đó có vấn đề.

Answer 1

Đây là vấn đề trình duyệt cụ thể và không có gì để làm với các chức năng Javascript được sử dụng. Ngay cả khi bạn áp dụng các lớp sau trước đó trên phần tử của bạn và cố kéo nó, phần tử có thể kéo vẫn không có kiểu dáng được áp dụng.

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

https://jsfiddle.net/gnxccyz7/

Tuy nhiên, đây là giải pháp cho vấn đề của bạn: chỉ cần tạo một phần tử con bên trong phần tử có khả năng kéo và áp dụng phong cách trên đó. Tính năng này cũng đang hoạt động trên 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

Theo như tôi biết trình duyệt nào sau đây trong dragstart:

1. tạo kéo feedbac k hình ảnh, đơn giản - làm cho ảnh chụp màn hình của nguyên tố
2. cho thấy hình ảnh này trong d'n'd

Nó được intresting rằng một số phong cách trên yếu tố kéo mục tiêu, chẳng hạn như transform được bỏ qua trong quá trình kéo tạo hình ảnh phản hồi (@ scooterlord chỉ đã)

---

Có nhiều thư viện giải quyết các vấn đề như vậy, ví dụ: http://interactjs.io/

Native d'n'd API vẫn chưa standartized và đã mất tích phải có tính năng, vì vậy tôi khuyên bạn sử dụng bất kỳ thư viện cho rằng