`ondragstart`多變的CSS樣式

對於ondragstart函數調用有效的可變CSS樣式是什麼？`ondragstart`多變的CSS樣式

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）

注意：原始元素正在轉換。但還有另外一種是用鼠標來的。這有問題。

來源

2017-06-16 Asim K T

你上哪兒去申請「改造」？ – Rayon

https://jsfiddle.net/rayon_1990/ct7po6q7/ – Rayon

'轉換'應該爲此工作。在一個快速的CodePen演示中，我只是設置它似乎工作正常。我在上面的代碼中遇到的問題是在轉換的結尾引用和結束該行的';'之間的額外'）'。 – bkbooth

這是一個特定的瀏覽器的問題，並沒有任何與使用的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/

來源

2017-12-20 09:07:58 scooterlord

據我所知的瀏覽器中dragstart如下：

產生阻力feedbac K的圖像，簡單 - 讓元素
的屏幕截圖顯示了科特迪瓦在此圖像n'd

據intresting即拖即目標元素上的一些樣式，如transform被拖動反饋的圖像創建過程中忽略（@ scooterlord已經指出）

有很多圖書館可以解決這些問題，例如http://interactjs.io/

本地D'n'd API仍然沒有standartized並缺少必須具備的功能，所以我建議你使用任何圖書館爲

來源

2017-12-20 15:09:58

`ondragstart`多變的CSS樣式

回答

相關問題