Menu
I am using the "draggable" attribute and find not all browsers render the element the same way while it is being dragged. Specifically, the background color sometimes is taken from the parent element (e.g. Chromium 33), and sometimes uses white (e.g. Firefox 28).
<div style="background-color: #79a; padding: 4px;">
<div style="border-radius: 12px; padding: 12px; background-color: #ead;" draggable='true' ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')">
<p>Some content here that should have clean rounded corners while being dragged</p>
</div>
</div>See above at http://jsfiddle.net/pZv35/3/.
Is there some way (preferably using CSS) to mitigate this problem?
643
To make an object draggable set draggable=true on that element. Just about anything can be drag-enabled: images, files, links, files, or any markup on your page.
The draggable global attribute is an enumerated attribute that indicates whether the element can be dragged, either with native browser behavior or the HTML Drag and Drop API.
HTML draggable Attribute The draggable attribute specifies whether an element is draggable or not.
CSS3 Rounded corners are used to add special colored corner to body or text by using the border-radius property.A simple syntax of rounded corners is as follows − #rcorners7 { border-radius: 60px/15px; background: #FF0000; padding: 20px; width: 200px; height: 150px; }
Updated fix. Pain in the ...
Hopefully, this will help someone. The solution is from the react-dnd github.
Add transform: translate(0, 0); to the node you wish to drag as a preview.
CSS in JS:
transform: 'translate(0, 0)'
Solution from here.
91
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
