`ondragstart` परिवर्तनीय सीएसएस शैलियों

Question

ondragstart फ़ंक्शन कॉल के लिए मान्य परिवर्तनीय सीएसएस शैलियों क्या हैं? https://jsfiddle.net/vnwx95mL/ (धन्यवाद @Rayon)

:

एचटीएमएल

<li draggable="true" ondragstart="drag(event)" id="id"> Item </li> 

सीएसएस

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 काम नहीं कर रहा

फिडल के लिए आवेदन कर रहे हैं

नोट: मूल तत्व बदल रहा है। लेकिन एक और है जो माउस के साथ आ रहा है। यह मुद्दा है।

Answer 1

यह एक ब्राउज़र-विशिष्ट मुद्दा है और इस्तेमाल किया जावास्क्रिप्ट कार्यक्षमता के साथ कोई संबंध नहीं है। यहां तक ​​कि यदि आप अपने तत्व पर पहले से लागू करते हैं और इसे खींचने का प्रयास करते हैं, तो ड्रैगगेबल तत्व अभी भी लागू स्टाइल के बिना है।

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

https://jsfiddle.net/gnxccyz7/

हालांकि, यहां आपकी समस्या का हल है: बस अपने खींचने योग्य तत्व के अंदर चाइल्ड तत्व बना सकते हैं और उस पर शैली लागू होते हैं। यह क्रोम पर भी काम कर रहा है!

जावास्क्रिप्ट:

function drag(ev) { 
    ev.target.className = 'myClass'; 
    ev.dataTransfer.setData("idOfItem", ev.target.id); 
} 

सीएसएस:

.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

जहां तक ​​मैं जानता हूँ कि ब्राउज़र dragstart के दौरान निम्नलिखित है:

1. खींचें feedbac बनाता है कश्मीर छवि, बस - बनाता तत्व
2. के स्क्रीनशॉट से पता चलता डी 'के दौरान इस छवि n'd

यह intresting है कि खींचें लक्ष्य तत्व पर कुछ शैलियों, जैसे transform खींचें प्रतिक्रिया छवि निर्माण के दौरान अनदेखी कर रहे हैं (@ scooterlord पहले से ही बताया)

---

कई पुस्तकालयों जो संकल्प इस प्रकार के मुद्दों, जैसे हैं http://interactjs.io/

मूल निवासी डी n'd एपीआई अभी भी standartized नहीं है और याद आ रही है सुविधाओं अत्यावश्यक, तो मैं आपको लगता है कि