简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > H5教程 > 主體

Html5拖放的實作方法

PHP中文网
發布： 2017-06-20 13:33:58
原創
1531 人瀏覽過

今天写一下html5的拖放问题。

 设置元素可以拖放

     设置元素可以拖放用draggable属性，设置为true。元素就可以拖放了。（注：火狐浏览器不支持）

 拖拽元素事件

    ondragstart：拖拽前触发

          ondrag：拖拽中连续触发

     ondragend：拖拽结束触发

 目标元素事件

    ondragenter：移入目标元素时触发

     ondragover：移入目标元素后连续触发

    ondragleave：离开目标元素触发

           ondrop：在目标元素释放鼠标触发

 

 事件的执行顺序

    1、drop不触发的时候

               dragstart>drag>dragenter>dragover>dragleave>dragend

   2、drop触发的时候（dragover的时候阻止默认事件）

              dragstart>drag>dragenter>dragover>drop>dragend

 解决火狐下的问题

   必须设置 dataTransfer对象才可以拖拽图片外的其他标签

     setData（）：设置数据key和value（必须是字符串）

     getData（）：获取数据，根据key值，获取相应的value

    offctAllowed：设置光标样式

 setDragImage：设置拖拽样式，三个参数：指定的元素、坐标X、坐标y

拖拽元素事件具体代码：

## #### ########### ######### ############## #########< ;/html> ############### ###### ############

目标元素事件具体代码：

    

 
 
 
  charset="UTF-8">
  <span class="html-tag">
 
 
 
 
draggable="true">
  # 
 
 
 
 
  charset="UTF-8">
  <span class="html-tag">
 
 
 
 
id="div1" draggable="true">
 
id="div2">
  # ############### ######################################################################################## ##### ############### ######### ########################################################################## #### ###### ############

解决火狐浏览器的拖放问题具体代码：

 
 
 
  charset="UTF-8">
  <span class="html-tag">
 
 
 
 
 
  • draggable="true">1
    		•
     
  • draggable="true">2
    		•
     
  • draggable="true">3
    		•
     
     
      ################ ######### ################ ####### ######### ################ ###### ######################################################## ####

    以上是Html5拖放的實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

    相關標籤：
    h5 html5 拖放
    來源：php.cn
    上一篇：Canvas學習系列一：初識canvas 下一篇：html5新增標籤有哪些？
    本網站聲明
    本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
    作者最新文章
    最新問題
    如何使用Javascript設定HTML5的required屬性？ 我正在嘗試在Javascript中將text輸入框標記為必需。 <inputid="edName"type="text"id=&quo...
    來自於 2023-10-13 08:52:25
    0
    2
    317
    無法取得滑鼠準確座標的問題：在調整頁面大小時使用HTML5畫布 我想從前端專家那裡創建這個像素效果。雖然我能夠在全螢幕畫布上實現整個像素效果：constcanvas=getElementById('canvas');canvas.height=...
    來自於 2023-09-12 12:20:33
    0
    1
    280
    使用Base64編碼的HTML5視訊M3U8 我想在HTML5的Video標籤中加入一個base64編碼的M3U8文件，我該怎麼做<!DOCTYPEhtml><htmllang="en"&...
    來自於 2023-09-09 23:07:18
    0
    1
    247
    vue.js / bootstrap：未呼叫 onclick 事件方法，錯誤'找不到變數：updateDocument” 我是前端開發新手，但對HTML5、CSS和Javascript有基本了解。我創建了一個vue.js專案並添加了bootstrap和axios。我的應用程式會載入數據並顯示它們。但是...
    來自於 2023-09-09 20:06:48
    0
    1
    362
    XHTML中移除影像標籤中的閉合斜線'/' 我有一個儲存圖像的字串txt1。它的值是XHTML格式，即元素已關閉：。但我需要刪除該關閉斜杠，因此它可以是像HTML5中一樣。有沒有辦法做到這一點。
    來自於 2023-09-06 12:15:38
    0
    1
    240
    相關專題
    更多>
    熱門推薦
    熱門教學
    更多>
    相關教學
    熱門推薦
    最新課程
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板
    關於我們 免責聲明 Sitemap
    PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！