帶有 HTML“可拖動”的圓角

Question

我正在使用“draggable”屬性，發現並非所有瀏覽器在拖動元素時都以相同的方式呈現元素。 具體來說，背景顏色有時取自父元素（例如 Chromium 33），有時使用白色（例如 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>

請參閱上面的http://jsfiddle.net/pZv35/3/ 。

有沒有辦法（最好使用 CSS）來緩解這個問題？

Answer 1

更新修復。 疼痛...

希望這會對某人有所幫助。 解決方案來自react-dnd github。

添加transform: translate(0, 0); 到您希望拖動作為預覽的節點。

JS 中的 CSS： transform: 'translate(0, 0)'

從這里解決。

Answer 2

這在 Chrome (71) 中仍然存在。 我發現這可以通過為可拖動元素設置不透明度來解決。 如果你不想要不透明度，你可以設置opacity: 0.999; 來解決這個問題。

解決方案： https : //jsfiddle.net/8ro46wf7/

Answer 3

對於圖像，這在當今的 Chrome 中對我不起作用。 我發現這個答案適用於圖像。

這是我今天工作的代碼：

在 CSS 中：

.content {
  background: url('') top left no-repeat;
  overflow: hidden;
  opacity: 0.999;
  border-radius: 50%;
}  

在 html 中：

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <div id="drag1" class="content" style="background:url('##POPULATED PROGRAMMATICALLY##');
   height:144px; width:144px;" draggable="true" ondragstart="drag(event)"> </div>
</div>

Answer 4

添加position: relative; .inner修復此問題，如下所示： http : //jsfiddle.net/pZv35/4/

編輯：我將其更新為包含opacity: 0.999 ，根據下面的 Rutger 解決方案： https : //jsfiddle.net/vzcbng7w/8/