HTMLドラッグドラッグイベント-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

HTMLドラッグドラッグイベント

韦小宝

May 18, 2018 pm 03:39 PM

html js イベント

HTMLではイベント処理はjsで行われます。HTML、js、CSSは切り離せません。以下はjsでのドラッグアンドドロップイベントの処理例です。

ドラッグイベントは 2 つの部分に分かれており、1 つはドラッグターゲット (つまり、ドラッグターゲット) の処理であり、もう 1 つはドラッグされたターゲット (つまり、リリースターゲット) の処理です。

ドラッグターゲット (ソース要素) でイベントをトリガーします:

ondragstart - ユーザーが要素のドラッグを開始するとトリガーされます

ondrag - 要素がドラッグされているときにトリガーされます

ondragend - ユーザーがドラッグを完了した後トリガー要素

ターゲットを解放するときにトリガーされるイベント:

ondragenter - このイベントは、マウスでドラッグされたオブジェクトがそのコンテナーのスコープに入ったときにトリガーされます

Ondragover - ドラッグされたオブジェクトが別のオブジェクトのコンテナースコープ内にある場合object このイベントは、ドラッグ時にトリガーされます

ondragleave - このイベントは、マウスでドラッグされたオブジェクトがコンテナーのスコープから離れるとトリガーされます

ondrop - このイベントは、ドラッグプロセス中にマウスボタンが放されたときにトリガーされます

実装コードは次のとおりです: box1 とリストは相互にドラッグできます

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box1{width: 200px;height: 250px;border:2px solid red;}
        #lists{ width:200px; height:250px; list-style: none;padding: 0;margin: 10px 0px; border:2px solid blue;}
        li{width: 150px;height: 30px; margin: 5px 0; padding:0;background: #ccc; line-height:30px;text-align: center ;}
    </style>
    <script>
        window.onload=function () {
            var box1=document.getElementById("box1");
            var lists=document.getElementById("lists");
            var lis=document.getElementsByTagName("li");
            for(var i=0;i<lis.length;i++){
                lis[i].draggable=true;
                lis[i].flag=false;
                //1、拖拽开始
                lis[i].ondragstart=function () {
                    this.flag=true;
                }
                //2、拖拽移动
                 two.ondrag=function () {

                }
                //3、拖拽结束
                lis[i].ondragend=function () {
                    this.flag=false;
                }
            }
            //投放区事件
            //1、进入投放区
            box1.ondragenter=function (e) {
                e.preventDefault();
            }
            //2、在投放区内移动
            box1.ondragover=function (e) {
                e.preventDefault();
            }
            //3、离开投放区
            box1.ondragleave=function (e) {
                e.preventDefault();
            }
            //4、完成投放 此时可以在投放区内做处理
            box1.ondrop=function (e) {
                e.preventDefault();
                for(var i=0;i<lis.length;i++){
                    if(lis[i].flag){
                        box1.appendChild(lis[i]);
                    }
                }
            }

            lists.ondragenter=function (e) {
                e.preventDefault();
            }
            lists.ondragover=function (e) {
                e.preventDefault();
            }
            lists.ondragleave=function (e) {
                e.preventDefault();
            }
            lists.ondrop=function (e) {
                e.preventDefault();
                for(var i=0;i<lis.length;i++){
                    if(lis[i].flag){
                        lists.appendChild(lis[i]);
                    }
                }
            }
        }
    </script>
</head>
<body>
    <p id="box1"></p>
    <ul id="lists">
        <li>数据1</li>
        <li>数据2</li>
        <li>数据3</li>
        <li>数据4</li>
        <li>数据5</li>
        <li>数据6</li>
    </ul>
</body>
</html>

ログイン後にコピー

その中で: getElementsByTagName() メソッドは、指定されたタグ名を持つオブジェクトのコレクションを返すことができます。

e.preventDefault(); は、システムのデフォルトのドラッグイベントを防止します。

appendChild() は、指定されたコントロールにコントロールを追加します。