HTML5_html5 チュートリアル スキルで要素のドラッグを実装する方法

多くのフロントエンドは、おそらく HTML5 ドラッグ アンド ドロップの実装方法を理解していません。この記事では、いくつかのアイデアを提供します。後で簡単に参照できるように、ファイルを整理してバックアップします。

最初の例:

index.html

XML/HTML コードコンテンツをクリップボードにコピー

1. /span>>
2. html>
3. 頭>
4. メタ charset="UTF- 8">
5. タイトル>ドラッグタイトル>
6. スタイル>
7. .box{
8. 幅: 400px;   
9. 高さ: 400px;   
10. float: 左;   
11. }
12. #box1{
13. 背景: #CCC;   
14. }
15. #box2{
16. 背景: #FF0;   
17. }
18. スタイル>
19. 頭>
20. ボディ>
21. div id="box1" クラス="ボックス">div>
22. div id="box2" クラス="ボックス">div>
23. img src="http: //pica.zol-img.com.cn/2016/02/1ace90ad77db716547614a18c4a9263g.jpg" alt="" id="img1" />

JavaScript コード复制コンテンツ到剪贴板

1. >