Question

我使用原生HTML5拖放将HTML的某些部分拖放到contenteditable元素中（contenteditable =“true”）..

问题是下一个：删除项目时会删除一些css样式。看起来好像发生了一些优化，例如，如果我们有颜色的元素：红色，我们将它放入droppable区域，这个css属性被删除，因为他的一些父母有相同的属性和值..

例如：

$(function () {
        $('.draggablePlaceholder').attr("contenteditable", false);
        $('.draggablePlaceholder').off('dragstart').on('dragstart', function (e) {   
            var dataToSend = $(e.target).attr("data-value");
            e.originalEvent.dataTransfer.setData($(e.target).attr("data-value-type"), $(e.target).attr("data-value"))
        });
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td style="color: red;" contenteditable="true">
            drop here...
        </td>
    </tr>
</table>


<span class="draggablePlaceholder" draggable="true" contenteditable="false" 
data-value="<table>
									<tbody><tr>
										<td style=&quot; color:red; font-size:19px; &quot;>SOME TEXT</td>
									</tr>
								</tbody></table>" data-value-type="text/html">
ITEM FOR DRAG
</span>

当您尝试将“SOME TEXT”移动到可放置区域时，结果为： 1 css属性：font-size：19px; 而不是2个css属性：color：red;字体大小：19px;

所以颜色：红色被移除

有没有办法跳过这个“优化”，所以原始代码被复制了？

在contenteditable元素中拖放html时删除了一些css样式

0 个答案: