html drag拖曳事件

韦小宝
發布: 2018-05-18 15:39:46
原創
3279 人瀏覽過

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

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

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

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

ondrag - 元素正在拖曳時觸發

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

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

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

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

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

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

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

    Title   

  • 数据1
  • 数据2
  • 数据3
  • 数据4
  • 数据5
  • 数据6
登入後複製

##其中: getElementsByTagName() 方法可傳回帶有指定標籤名的物件的集合。

e.preventDefault();是阻止系統預設的拖曳事件。

appendChild()是新增控制項到指定控制項。

e.preventDefault();
登入後複製
以上就是html drag拖曳事件的所有內容了,希望帶給大家幫助。

相關推薦:

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

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

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!