您現在的位置是:電腦技術吧?>? 組裝維修 ??>??拖放,拖放支持庫??>??正文詳情

拖放,拖放支持庫

琦高義2019-11-11 17:00:34 人圍觀
簡介拖放api拖放是HTML5標準的一部分。拖放是一種常見的功能,可以捕獲對象,然后將其拖動到其他位置。在HTML5中,拖放是標準的一部分,任何元素都可以拖放。瀏覽器支持Insdl拖放

拖放(Drag 和 drop)是 HTML5 標準的組成部分。

拖放拖放是一種常見的特性,即抓取對象以后拖到另一個位置。

在 HTML5 中,拖放是標準的一部分,任何元素都能夠拖放。

瀏覽器支持Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。

注釋:在 Safari 5.1.2 中不支持拖放。

HTML5 拖放實例下面的例子是一個簡單的拖放實例:實例!DOCTYPE HTMLhtmlheadscript type=text/javascriptfunction allowDrop(ev){ev.preventDefault();}function drag(ev){ev.dataTransfer.setData(Text,ev.target.id);}function drop(ev){ev.preventDefault();var data=ev.dataTransfer.getData(Text);ev.target.appendChild(document.getElementById(data));}/script/headbodydiv id=div1 ondrop=drop(event)ondragover=allowDrop(event)/divimg id=drag1 src=img_logo.gif draggable=trueondragstart=drag(event) width=336 height=69 //body/html親自試一試它看上去也許有些復雜,不過我們可以分別研究拖放事件的不同部分。

設置元素為可拖放首先,為了使元素可拖動,把 draggable 屬性設置為 true :img draggable=true /拖動什么 - ondragstart 和 setData()然后,規定當元素被拖動時,會發生什么。

在上面的例子中,ondragstart 屬性調用了一個函數,drag(event),它規定了被拖動的數據。

dataTransfer.setData() 方法設置被拖數據的數據類型和值:function drag(ev){ev.dataTransfer.setData(Text,ev.target.id);}在這個例子中,數據類型是 Text,值是可拖動元素的 id (drag1)。

放到何處 - ondragoverondragover 事件規定在何處放置被拖動的數據。

默認地,無法將數據/元素放置到其他元素中。

如果需要設置允許放置,我們必須阻止對元素的默認處理方式。

這要通過調用 ondragover 事件的event.preventDefault() 方法:event.preventDefault()進行放置 - ondrop當放置被拖數據時,會發生 drop 事件。

在上面的例子中,ondrop 屬性調用了一個函數,drop(event):function drop(ev){ev.preventDefault();var data=ev.dataTransfer.getData(Text);ev.target.appendChild(document.getElementById(data));}代碼解釋: 調用 preventDefault() 來避免瀏覽器對數據的默認處理(drop 事件的默認行為是以鏈接形式打開) 通過 dataTransfer.getData(Text) 方法獲得被拖的數據。

該方法將返回在 setData() 方法中設置為相同類型的任何數據。

被拖數據是被拖元素的 id (drag1) 把被拖元素追加到放置元素(目標元素)中

版權聲明:本文由 琦高義 整理編輯。

原標題:vue拖放,css3拖放

轉載注明出處:http://www.dn9ww09s.icu/assemble/11759.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 怎么清理c盤垃圾win10,win10系統怎么清理c盤垃圾

    怎么清理c盤垃圾win10,win10系統怎么清理c盤垃圾 相關圖片win10如何清理c盤目前,很多朋友已經將自己的電腦系統升級到win10系統版本。由于電腦配置原因,在安裝win10系統后,其中一些磁盤系統的C盤很緊,導致空間不足。在操作過程中,發wi...

  • cbox,scbox

    cbox,scbox 相關圖片cbox精選一些電腦用戶想在電腦上看直播電視,但他們認為換頻道很麻煩。有什么好的軟件可以介紹?為此,今天編輯就為大家推薦Cbox家庭版軟件,這是中國互聯網電視臺推出的Cbo央視網...

  • 技巧,常用

    技巧,常用 相關圖片50個工作中最常用excel技巧一。UL標記在Mozilla中默認有一個填充值,而在ie中只有margin有一個值。2。同一個類選擇器可以在文檔中重復出現,但ID選擇器只能出現一次。對于標簽的辦公技...

  • 打印機模式,打印機怎么設置打印

    打印機模式,打印機怎么設置打印 相關圖片打印機正在打印但是打不出來打印機已與工作融為一體,打印操作是必不可少的辦公技能。我們都知道打印機缺省雙面打印模式,不僅效率高,最重要的是環保,減少二氧化碳排放,提...

  • 怎么在word中鏈接網頁,網頁中如何嵌入一個flash

    怎么在word中鏈接網頁,網頁中如何嵌入一個flash 相關圖片表格中插圖片怎么設置這個例子是CSS的一系列入門教程。在本課中,我們將學習如何在網頁中插入CSS樣式表。我們主要學習在網頁中插入外部樣式表、內部樣式表、導入外部樣式表和嵌...

  • 電腦桌面圖標怎么有藍底,電腦桌面圖標都有藍底

    電腦桌面圖標怎么有藍底,電腦桌面圖標都有藍底 相關圖片電腦圖標有藍底一些新電腦用戶,當他們第一次接觸電腦時,似乎發現了“新美洲大陸”。面對電腦只是一次突發性的操作。有些用戶在操作中會犯錯誤,導致電腦出現某些情況。以桌...

  • 三單語法,英語語法變化

    三單語法,英語語法變化 相關圖片常見的語法形式HTML5的語法變化主要體現在標記不再區分大小寫、元素可以省略結束標記、允許省略屬性值的屬性等等。對于那些對HTML5感興趣的人,你可以參考他們,希望能幫助你理什...

  • 三階魔方還原教程,怎么還原魔方

    三階魔方還原教程,怎么還原魔方 相關圖片新手怎樣還原魔方如何處理這種情況?事實上,我們很容易有這個問題。只要我們做以下步驟,我們就能解決這個問題。魔方還原數據的過程在我們的生活中非常普遍。使用方便。為了...

  • input元素有哪些,input元素

    input元素有哪些,input元素 相關圖片input輸入我們已經討論了一些HTML5的改進,比如占位符、預取和Web存儲。這里有兩種新的輸入元素類型:email和URL。讓我們按照代碼來看看它們的好處:語法格式:新輸input data...

  • mts格式文件怎么打開,mts文件用什么播放

    mts格式文件怎么打開,mts文件用什么播放 相關圖片mts文件怎么轉換格式事實上,視頻格式不僅限于MP4,還包括QSV文件。這是iqiyi的一種特殊格式文件,MTs文件是另一種視頻文件。我不知道我的朋友們是否經常遇到帶有MTS后綴的視手機播放...

熱評文章

  • wow大腳配置文件下載失敗,大腳更新基礎插件失敗

    wow大腳配置文件下載失敗,大腳更新基礎插件失敗 相關圖片大腳單體插件刷新不出來不得不提的是,作為一款風靡全球的魔獸網游,其形象引擎在過去的10年中不斷更新。Bigfoot插件也一樣,但用戶似乎不知道更新Bigfoot插件。有些用戶更新失敗大...

  • 標簽的定義,給自己定義一個標簽

    標簽的定義,給自己定義一個標簽 相關圖片A標簽HTML 5!DOCTYPE標記定義和用法!DOCTYPE聲明必須位于HTML 5文檔的第一行,即HTML標記之前。標記告訴瀏覽器用于文檔的HTML規范。DOC自定標簽...

  • 如何系統還原,一鍵還原系統

    如何系統還原,一鍵還原系統 相關圖片raid6數據恢復很多人使用備份的習慣,系統也可以備份。當需要對整個系統進行備份時,可以通過系統還原軟件進行還原。小編為大家分享一款不錯的系統還原軟件。系統還原軟件可以備...

  • ai文件如何轉換成電子搞文件,電腦ai文件用什么軟件打開

    ai文件如何轉換成電子搞文件,電腦ai文件用什么軟件打開 相關圖片ai軟件培訓我們的電腦上會有很多文件,但有些不知道是什么文件。直接打開時不能打開。很多人會對后綴為AI的文件感到困惑它們是什么文件?怎么能不打開呢?實際上,人工智能文件...

  • 顯示器圖標怎么變小,電腦顯示器圖標變大了怎么辦

    顯示器圖標怎么變小,電腦顯示器圖標變大了怎么辦 相關圖片電腦顯示器接下來,我們將以圖片的形式介紹這個圖標的制作過程。電腦開機不顯示桌面圖標...

  • 筆記本觸控板沒反應,聯想筆記本觸控板沒反應

    筆記本觸控板沒反應,聯想筆記本觸控板沒反應 相關圖片筆記本觸摸板失靈對于很多筆記本電腦用戶來說,使用過程中的一些小問題導致機器無法正常工作是很常見的事情。例如,當數據丟失且CD-ROM驅動器被禁用時,在“我的電腦”中找不到...

  • css的屬性有哪些,css屬性

    css的屬性有哪些,css屬性 相關圖片css display屬性在項目中遇到使用此屬性來設置文本的垂直顯示,但它只能在ie中使用,并且在其他瀏覽器中沒有好的替代方法語法:writing mode:LR TB | TB RL參css margin屬性...

  • 全能文件恢復軟件,全能文件恢復

    全能文件恢復軟件,全能文件恢復 相關圖片手機數據恢復軟件在我們的計算機操作過程中,有些用戶會根據需要對系統的硬盤進行分區。在操作過程中,由于操作不當或忘記備份文件,文件會因系統分區而被破壞。我們怎樣才能...

  • 怎么做文字生成鏈接,怎么把鏈接變成文字

    怎么做文字生成鏈接,怎么把鏈接變成文字 相關圖片怎么轉發文字加鏈接一。雙擊。在CSS樣式表面板中打開T1樣式表,在這里定義它的塊鏈接樣式。點擊背景選項,首先在鏈接中添加背景色,這里選擇紅色,在分類欄中選擇邊框,然后在上...

  • 聯想筆記本加什么內存條,聯想手提電腦加內存條

    聯想筆記本加什么內存條,聯想手提電腦加內存條 相關圖片筆記本怎么加內存條當我們長時間使用筆記本時,會感覺到筆記本的運行速度沒有以前快了。當我們打開電腦,打開一些軟件,運行空間就會變紅。這對我們的使用有著嚴重的影響,但...

關注微信

变脸官网查询