我们通过上述的技巧，实现了一个仅仅使用 CSS 实现的自由拖拽的便签贴 。我们可以自由的将其拖拽到任意地方 。看看效果：
当然，我们可以再配合上另外一个有意思是 HTML 属性 -- contenteditable 。
contenteditable 是一个 HTML TAG 的属性，表示元素是否可被用户编辑 。如果可以，浏览器会修改元素的部件以允许编辑 。
简单修改一下 DOM 结构：
<div class="g-container"> <div class="g-resize"></div> <div class="g-content" contenteditable="true"> Lorem ipsum dolor sit amet consectetur?</div></div>此时，元素不仅可以被拖动，甚至可以被重写，感受一下：
文章插图
纯 CSS 实现的效果，非常的有意思，完整的代码，你可以戳这里：Pure CSS Auto Drag Demo
最后基于 resize 这个 CSS 属性，其实还有很多有意思的用法 。譬如我之前使用了 Resize 实现了一个图片切换预览的功能：CSS 奇思妙想 | 使用 resize 实现强大的图片拖拽切换预览功能 可以一并看看，相信能碰撞出更多火花 。
感兴趣的同学可以自己动手，更多的去尝试，组合 。
好了，本文到此结束，希望本文对你有所帮助
如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知 。
经验总结扩展阅读
- 超市买的鲜海带丝能直接吃吗
- 扭矩与压强的关系是什么
- 印度人口要超过中国了吗 印度人口数量要超中国了吗
- 喝纯牛奶上火了怎么办
- 自己榨的纯花生汁可以长期喝吗
- 纯白小衬衫配什么外套啊
- 【博学谷学习记录】超强总结，用心分享|MySql连接查询超详细总结
- 国内冷门却超美的海岛
- 荣耀20支持超级快充吗
- 卡式炉气罐超市有卖吗