整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
近在摸魚(yú)的過(guò)程中，發(fā)現(xiàn)了一個(gè)拖動(dòng)組件，發(fā)現(xiàn)挺有意思的。于是想到在HTML5原生就支持這個(gè)功能，于是就想著自己也試著弄一個(gè)小demo試試看
最早在網(wǎng)頁(yè)中引入拖放功能的是IE4。當(dāng)時(shí)，網(wǎng)頁(yè)中只有兩種對(duì)象可以拖放，圖像和某些文本。拖動(dòng)圖像時(shí)，先把鼠標(biāo)放在圖像上，按住鼠標(biāo)不放就可以拖動(dòng)它。拖動(dòng)文本時(shí)，要先選中文本，然后就可以想要拖動(dòng)圖像那樣拖動(dòng)。在IE4中，唯一有效的防止目標(biāo)是文本框，到了IE5，拖放功能添加了新的時(shí)間，網(wǎng)頁(yè)中幾乎任意元素都可以作為目標(biāo)元素。HTML5以IE的實(shí)例為基礎(chǔ)制訂了拖放規(guī)范。
代碼
拖動(dòng)樣式
通過(guò)div添加draggable屬性為true之后，我們已經(jīng)可以進(jìn)行簡(jiǎn)單的拖動(dòng)了。那么拖動(dòng)已經(jīng)是可以拖動(dòng)了，我們需要另一個(gè)地方來(lái)接收拖動(dòng)，所以我們對(duì)代碼做了些修改
來(lái)回拖動(dòng)案例
文字支持在兩個(gè)框中拖動(dòng)
需要注意的點(diǎn)
1.需要設(shè)置要移動(dòng)屬性draggable的屬性值為true才支持拖拽
2.dataTransfer.setData設(shè)置了被拖動(dòng)的數(shù)據(jù)類(lèi)型和值
3.dataTransfer.getData("Text") 方法獲得被拖的數(shù)據(jù)。
4.當(dāng)放置被拖數(shù)據(jù)時(shí)，會(huì)發(fā)生 drop 事件，調(diào)用 preventDefault() 來(lái)避免瀏覽器對(duì)數(shù)據(jù)的默認(rèn)處理（drop 事件的默認(rèn)行為是以鏈接形式打開(kāi)）。
draggable元素是否可拖拽 - true 可拖拽 - false 不可拖拽 - auto 跟隨瀏覽器定義是否可以拖拽
dragstart() - 當(dāng)用戶(hù)開(kāi)始拖拽一個(gè)元素或者一個(gè)文本選取區(qū)塊的時(shí)觸發(fā) drag() - 當(dāng)用戶(hù)正在拖拽一個(gè)元素或者一個(gè)文本選取區(qū)塊的時(shí)觸發(fā) dragend() - 當(dāng)用戶(hù)結(jié)束拖拽一個(gè)元素或者一個(gè)文本選取區(qū)塊的時(shí)觸發(fā)
dragenter - 當(dāng)一個(gè)元素或文字選取區(qū)塊被拖曳移動(dòng)進(jìn)入一個(gè)有效的放置目標(biāo)時(shí)觸發(fā) dragover - 當(dāng)一個(gè)元素或文字選取區(qū)塊被拖曳移動(dòng)經(jīng)過(guò)一個(gè)有效的放置目標(biāo)時(shí)觸發(fā) dragleave - 當(dāng)一個(gè)元素或文字選取區(qū)塊被拖曳移動(dòng)離開(kāi)一個(gè)有效的放置目標(biāo)時(shí)觸發(fā) dragexist - 當(dāng)一個(gè)元素不再是被選取中的拖曳元素時(shí)觸發(fā) drop -當(dāng)一個(gè)元素或文字選取區(qū)塊被放置至一個(gè)有效的放置目標(biāo)時(shí)觸發(fā)
屬性 - types 只讀屬性。它返回一個(gè)我們?cè)赿ragstart事件中設(shè)置的拖動(dòng)數(shù)據(jù)格式的數(shù)組。 格式順序與拖動(dòng)操作中包含的數(shù)據(jù)順序相同。 - files 返回拖動(dòng)操作中的文件列表。包含一個(gè)在數(shù)據(jù)傳輸上所有可用的本地文件列表。如果拖動(dòng)操作不涉及拖動(dòng)文件，此屬性是一個(gè)空列表。 - dropEffect 獲取當(dāng)前選定的拖放操作的類(lèi)型或?qū)⒉僮髟O(shè)置為新類(lèi)型[none、move、copy、link] - effectAllowed 指定拖放操作所允許的效果[none, copy, copyLink, copyMove, link, linkMove, move, all, uninitialized] 方法 void setData(format, data) - 將拖動(dòng)操作的拖動(dòng)數(shù)據(jù)設(shè)置為指定的數(shù)據(jù)和類(lèi)型。format可以是MIME類(lèi)型 String getData(format) - 返回指定格式的數(shù)據(jù)，format與setData()中一致 void clearData([format]) - 刪除給定類(lèi)型的拖動(dòng)操作的數(shù)據(jù)。如果給定類(lèi)型的數(shù)據(jù)不存在，此方法不執(zhí)行任何操作。如果不給定參數(shù)，則刪除所有類(lèi)型的數(shù)據(jù)。 void setDragImage(img, x, y) - 指定一副圖像，當(dāng)拖動(dòng)發(fā)生時(shí)，顯示在光標(biāo)下方。大多數(shù)情況下不用設(shè)置，因?yàn)楸煌蟿?dòng)的節(jié)點(diǎn)被創(chuàng)建成默認(rèn)圖片。x,y參數(shù)分別指示圖像的水平、垂直偏移量
瀏覽器支持情況
簡(jiǎn)單幾行代碼就實(shí)現(xiàn)簡(jiǎn)單拖拽效果，如果不使用原生drop要實(shí)現(xiàn)拖拽效果需要比較復(fù)雜，兼容性方面的問(wèn)題也沒(méi)有特別大的問(wèn)題（IE除外），相信在今后的工作中會(huì)有機(jī)會(huì)用到。當(dāng)然在使用過(guò)程中也遇到一個(gè)問(wèn)題，當(dāng)放置被拖數(shù)據(jù)時(shí)，會(huì)發(fā)生 drop 事件，調(diào)用 preventDefault來(lái)避免瀏覽器對(duì)數(shù)據(jù)的默認(rèn)處理（drop 事件的默認(rèn)行為是以鏈接形式打開(kāi)），如果不使用preventDefault，則不會(huì)觸發(fā)drop事件，則拖拽就不會(huì)觸發(fā)。
024年我們?cè)谛掳姹镜腤EB組態(tài)設(shè)計(jì)添加更多的交互性，提供的全新藍(lán)圖功能，可以幫助用戶(hù)快速搭建 WEB 組態(tài)應(yīng)用場(chǎng)景,所需要的交互和控制邏輯，更加直觀(guān)的操作方式。
在統(tǒng)一的場(chǎng)景藍(lán)圖中通過(guò)拖拉配置的方式管理當(dāng)前場(chǎng)景所有事件和動(dòng)畫(huà)數(shù)據(jù)邏輯，實(shí)現(xiàn)對(duì)整體邏輯的直觀(guān)控制，比以往為每個(gè)組件單獨(dú)配置動(dòng)畫(huà)來(lái)得更加高效和便捷。深入了解場(chǎng)景中的交互邏輯，快速定位和修復(fù)問(wèn)題，使得您的設(shè)計(jì)更加直觀(guān)和智能。
不再局限于為每個(gè)組件單獨(dú)配置動(dòng)畫(huà)，藍(lán)圖功能為您提供了更加系統(tǒng)化和集中化的管理方式。您可以輕松地添加、編輯和刪除動(dòng)畫(huà)，設(shè)置事件觸發(fā)條件，實(shí)現(xiàn)更加復(fù)雜和多樣化的交互效果，為您的 WEB 組態(tài)設(shè)計(jì)注入更多活力和創(chuàng)意。
藍(lán)圖功能不僅節(jié)省了配置時(shí)間，更重要的是后續(xù)我們將基于這個(gè)配置方式實(shí)現(xiàn)小型的業(yè)務(wù)系統(tǒng)，最終可以像 wincc、labview、Intouch那樣更靈活、可以生成獨(dú)立可運(yùn)行的業(yè)務(wù)程序，可按CS和BS的架構(gòu)方式進(jìn)行靈活部署。
#web組態(tài)##wincc##labview#
之前需要為每個(gè)組件去定義配置，當(dāng)組件多了，配置管理就很不方便也不直觀(guān)
舊的配置方式
在統(tǒng)一的場(chǎng)景藍(lán)圖中通過(guò)拖拉配置的方式管理當(dāng)前場(chǎng)景所有事件和動(dòng)畫(huà)數(shù)據(jù)邏輯，實(shí)現(xiàn)對(duì)整體邏輯的直觀(guān)控制
藍(lán)圖設(shè)計(jì)
我們可視化的版本將完成GIS、2D、3D、報(bào)表為用戶(hù)提供更簡(jiǎn)單直觀(guān)的體驗(yàn)
隨著互聯(lián)網(wǎng)+的深入發(fā)展，我們已經(jīng)越來(lái)越感受到它的強(qiáng)大，HTML5也隨著互聯(lián)網(wǎng)火了半邊天，微信小程序、虛擬現(xiàn)實(shí)已經(jīng)走進(jìn)了我們生活，這又引發(fā)了一次互聯(lián)網(wǎng)發(fā)展高潮。現(xiàn)在互聯(lián)網(wǎng)企業(yè)對(duì)高端HTML5開(kāi)發(fā)工程師的缺口依然很大，因此很多人抓住這個(gè)機(jī)會(huì)選擇學(xué)習(xí)HTML5開(kāi)發(fā)。今天千鋒南京HTML5培訓(xùn)小編將帶大家一起看一看HTML5有哪些知識(shí)需要你了解？準(zhǔn)備入門(mén)HTML5的新手需要了解的知識(shí)有哪些？
HTML5到底是什么？
一般廣義而言的HTML5則包含了HTML、CSS和JavaScript三個(gè)部分，而不只是第一印象僅僅HTML部分而已，在CSS 3和JavaScript層面也有許多的創(chuàng)新，讓整個(gè)網(wǎng)頁(yè)從布局到處理都更加給力，新囊括的技術(shù)讓之前實(shí)現(xiàn)相當(dāng)困難且安全性危機(jī)重重的功能變?yōu)榱爽F(xiàn)實(shí)，
HTML5好處-為什么要用HTML5
HML5在布局上更得體，記得以前的主流table過(guò)渡到主流div;今的布局對(duì)搜索引擎更加友好，比如<article>內(nèi)總是會(huì)包含文章內(nèi)容，而nav是導(dǎo)航信息;HTML5的移動(dòng)手機(jī)支持也日趨完善，兼容移動(dòng)端可是一個(gè)簡(jiǎn)單概念。雖然多網(wǎng)合一，兼容問(wèn)題永遠(yuǎn)存在，布局適配也是一門(mén)技術(shù)活;另外在Pad等其他客戶(hù)端也發(fā)揮著越來(lái)越重要的優(yōu)勢(shì)。
HTML5的技術(shù)組成：
離線(xiàn)功能
HTML5透過(guò)JavaScript提供了數(shù)種不同的離線(xiàn)儲(chǔ)存功能，相對(duì)于傳統(tǒng)的Cookie而言有更好的彈性以及架構(gòu)，并且可以?xún)?chǔ)存更多的內(nèi)容。
WebStorage – 比Cookies更大、更有彈性的的儲(chǔ)存
Web SQL Database – 本地端的SQL資料庫(kù)
Indexed DB – Key-value的本地資料庫(kù)
Application Cache – 將部分常用的網(wǎng)頁(yè)內(nèi)容cache起來(lái)
即時(shí)通訊
以往網(wǎng)站由于HTTP協(xié)定以及瀏覽器的設(shè)計(jì)，即時(shí)的互動(dòng)性相當(dāng)?shù)氖芟蓿荒苁褂靡恍┘记蓙?lái)「模擬」即時(shí)的通訊效果，但HTML5提供了完善的即時(shí)通訊支援。
什么輪詢(xún)、第三方的統(tǒng)統(tǒng)不要，自已來(lái)實(shí)現(xiàn)。
WebSocket – 即時(shí)的socket連線(xiàn)
Web Workers – 以往JavaScript都是single thread，透過(guò)Worker可以有多個(gè)運(yùn)算
Notifications – 塬生的提示訊息，類(lèi)似像OS X的Growl提示
文件以及硬件支持
不知道大家有沒(méi)有發(fā)現(xiàn)，在Gmail等新的網(wǎng)頁(yè)程式當(dāng)中，已經(jīng)可以透過(guò)拖拉的方式將檔案作為郵件附件?這就是這部份HTML5檔案的功能中的Drag’n Drop和File API。
Drag’n Drop – HTML元素的拖拉
File API – 讀取使用者本機(jī)電腦的內(nèi)容
Geolocation – 地理定位
Device orientation – 手持裝置的方向
Speech input – 語(yǔ)音輸入
語(yǔ)意化
語(yǔ)意化的網(wǎng)路是可以讓電腦能夠更加理解網(wǎng)頁(yè)的內(nèi)容，對(duì)于像是搜尋引擎的優(yōu)化(SEO)或是推薦系統(tǒng)可以有很大的幫助。
New tags – 新的標(biāo)籤，像是<header>、<section>等
Application tags – 也是新的標(biāo)籤，像是<meter>、<progress>等
Microdata – 加入語(yǔ)意的資料讓搜尋引擎等網(wǎng)站可以正確顯示
Form type – <form>可以加入的type便多了，包含email和tel等屬性，瀏覽器會(huì)協(xié)助進(jìn)行資料格式的驗(yàn)證
多媒體
Audio、Video的標(biāo)簽支援以及Canvas的功能應(yīng)該是大家對(duì)于HTML5最熟悉的部份了，也是許多人認(rèn)為Flash會(huì)被取代的主要原因。
Audio video – 影片和音樂(lè)的塬生播放支援
Canvas – 2D的繪圖功能支援
Canvas 3D – 3D的繪圖功能支援
SVG – 向量圖支援
CSS 3
CSS3支援了字體的嵌入、版面的排版，以及最令人印象深刻的動(dòng)畫(huà)功能。
Selector – 更有彈性的選擇器
Webfonts – 嵌入式字體
Layout – 多樣化的排版選擇
Stlying radius gradient shadow – 圓角、漸層、陰影
Border background – 邊框的背景支援
Transition – 元件的移動(dòng)效果
Transform – 元件的變形效果
Animation – 將移動(dòng)和變形加入動(dòng)畫(huà)支援
JavaScript
在比較JavaScript的基本面也新增了DOM的API、和瀏覽器上下頁(yè)的紀(jì)錄修改。
DOM API – 更方便的查詢(xún)DOM元件
History API – 瀏覽器的上下頁(yè)內(nèi)容修改，方便AJAX可以保留瀏覽記錄
現(xiàn)在就用HTML5
截至目前而言，主流的網(wǎng)頁(yè)瀏覽器Firefox 5、Chrome 12和Safari 5都已經(jīng)支援了許多的HTML5標(biāo)準(zhǔn)，而且目前最新版的IE 9也支援了許多HTML5標(biāo)準(zhǔn)。隨著使用者陸續(xù)升級(jí)到新版的瀏覽器，開(kāi)發(fā)者應(yīng)該在現(xiàn)在就可以著手開(kāi)發(fā)!兼容性問(wèn)題會(huì)隨著時(shí)間的推移而越來(lái)越少。但對(duì)于不得不照顧底版本用戶(hù)的網(wǎng)站，網(wǎng)上也有大量的回退解決方案。
以上就是千鋒南京HTML5培訓(xùn)小編今天給大家?guī)?lái)的新手入門(mén)HTML5需要了解的知識(shí)，希望本篇文章能夠?qū)δ阌兴鶐椭Ｏ肓私飧郒TML5相關(guān)資訊歡迎關(guān)注千鋒南京官網(wǎng)，這里不僅有更多HTML5相關(guān)信息，還有專(zhuān)業(yè)的HTML5技術(shù)文章、教程視頻。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
