transform.html (749B)
1 <!DOCTYPe html> 2 <meta charset='utf-8'> 3 <title>drag and drop – draggable area boundaries – transformed elements</title> 4 <style> 5 a { 6 display: block; 7 height: 200px; 8 width: 200px; 9 background-color: blue; 10 margin-left: 100px; 11 -moz-transform: rotate(-45deg) skew(15deg, 15deg); 12 -o-transform: rotate(-45deg) skew(15deg, 15deg); 13 -webkit-transform: rotate(-45deg) skew(15deg, 15deg); 14 transform: rotate(-45deg) skew(15deg, 15deg); 15 } 16 </style> 17 <ol> 18 <li>Try dragging the blue box below by clicking and holding <em>just</em> 19 outside its skewed edges. It should <em>not</em> be draggable.</li> 20 <li><p>Drag the blue box below. It should be draggable.</p> 21 22 <a draggable="true" ondragstart="event.dataTransfer.effectAllowed ='copy'">TEST</a>