JSオリジナルドラッグ機能draggable属性(H 5)

1395 ワード

JavaScriptおでん

html 5には要素をドラッグ&ドロップできる要素属性draggableが1つ追加されています




    
    
    
    Document
    

    
        function dragstart(event) {
            //      id   dataTransfer 
            event.dataTransfer.setData("dragContent", event.target.id);
        }
 
        function drop(event){
              event.preventDefault();
            //            
            let data = event.dataTransfer.getData('dragContent');
            event.target.appendChild(document.getElementById(data))
        }
 
        function dragover(event) {
           event.preventDefault();
        }

注意点:
1.オブジェクトのドラッグ＆ドロップとターゲット要素の配置の両方に要素idを追加し、ドラッグ＆ドロップの制御中にこの要素を取得する
2.ドラッグ・オブジェクトはdraggable値を設定する必要があります.ondragstartメソッドを追加する必要があります.このメソッドでは、ドラッグ・オブジェクトのidを保存して、後で呼び出しを出す必要があります.
3.ターゲットオブジェクトはメソッドondropを追加し、このメソッドでドラッグオブジェクトを取り出して操作に入る.またondragoverを追加し、ブラウザのデフォルト値を削除しなければならない.
以上がhtml 5に追加されたドラッグ&ドロップ機能です

Spring MVC学習ノート(1)

html 5+jsドラッグアップロード