html drag拖曳事件-js教程-PHP中文網

首頁

web前端

js教程

html drag拖曳事件

韦小宝

May 18, 2018 pm 03:39 PM

htmljs事件

在html中，事件的處理都是在js中完成的，html,js和css是密不可分的。以下就是在js中處理拖曳事件的例子。

拖曳事件分兩大塊，一塊是對拖曳的目標上的處理(即拖曳目標)；一塊是對拖曳到的目標上的處理(即釋放目標)。

在拖曳目標上觸發事件 (來源元素):

ondragstart - 使用者開始拖曳元素時觸發

ondrag - 元素正在拖曳時觸發

ondragend - 使用者完成元素拖曳後觸發

# 時觸發目標時觸發的事件:

## ondragenter - 當被滑鼠拖曳的物件進入其容器範圍內時觸發此事件

ondragover - 當某被拖曳的物件在另一物件容器範圍內拖曳時觸發此事件

ondragleave - 當被滑鼠拖曳的物件離開其容器範圍內時觸發此事件 ondrop - 在一個拖曳過程中，釋放滑鼠鍵時觸發此事件

實作程式碼如下：box1和lists可以互相拖曳

<!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()是新增控制項到指定控制項。

e.preventDefault();

以上就是html drag拖曳事件的所有內容了，希望帶給大家幫助。

相關推薦：

#用JS和html做一個簡易畫板程式碼

Js操作DOM物件的流程############html js 有關問題#######

以上是html drag拖曳事件的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript在行動中：現實世界中的示例和項目Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。

Python vs. JavaScript：學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。