html拖放数据库字段,HTML5 拖放（Drag 和 Drop）
拖放是一種常見的特性，即抓取對象以后拖到另一個位置。
在 HTML5 中，拖放是標準的一部分，任何元素都能夠拖放.
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
function 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));
}
拖動 W3CSchool.cc 圖片到矩形框中:
它看上去也許有些復雜，不過我們可以分別研究拖放事件的不同部分。
設置元素為可拖放
首先，為了使元素可拖動，把 draggable 屬性設置為 true ：
拖動什么 - ondragstart 和 setData()
然后，規定當元素被拖動時，會發生什么。
在上面的例子中，ondragstart 屬性調用了一個函數，drag(event)，它規定了被拖動的數據。
dataTransfer.setData() 方法設置被拖數據的數據類型和值：
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
在這個例子中，數據類型是 "Text"，值是可拖動元素的 id ("drag1")。
放到何處 - ondragover
ondragover 事件規定在何處放置被拖動的數據。
默認地，無法將數據/元素放置到其他元素中。如果需要設置允許放置，我們必須阻止對元素的默認處理方式。
這要通過調用 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")
把被拖元素追加到放置元素(目標元素)中
HTML5 拖放---drag和drop
拖放四步走:第一步:設置元素可拖放,即把 draggable屬性設置為 true:? 例:
基于HTML5的Drag and Drop生成圖片Base64信息
HTML5的Drag and Drop是很不錯的功能,網上使用例子較多如?http://html5demos.com/drag?,但這些例子大部分沒實際用途,本文將搞個有點使用價值的例子,通過Drag ...
HTML5 之拖放(drag與drop)
拖放(Drag 和 drop)是 HTML5 標準的組成部分. 拖放是一種常見的特性,即抓取對象以后拖到另一個位置. 在 HTML5 中,拖放是標準的一部分,任何元素都能夠拖放. HTML5 拖放實例 ...
HTML5拖放(drag和drog)
拖放(drag和drog)是HTML5的標準的組成部分,也是種常見的特性,意義為抓起一個元素放入到另外的一個位置,在HTML5中任何元素都可以被拖放,前題是要相關進行設置. 1.設置元素為可拖放,也就 ...
通過HTML5的Drag and Drop生成拓撲圖片Base64信息
HTML5 原生的 Drag and Drop是很不錯的功能,網上使用例子較多如?http://html5demos.com/drag?,但這些例子大部分沒實際用途,本文將搞個有點使用價值的例子,通過 ...
炫酷的html5(Drag 和 drop)拖放
在 HTML5 中,拖放是標準的一部分,任何元素都能夠拖放.也是一種常見的特性,即抓取對象以后拖到另一個位置. 瀏覽器支持 Internet Explorer 9.Firefox.Opera 12.C ...
拖放(Drag和Drop)--html5
拖放,就是抓取一個對象后拖放到另一個位置.很常用的一個功能,在還沒有html5的時候,我們實現這個功能,通常會用大量的js代碼,再利用mousemove,mouseup等鼠標事件來實現,總的來說比較麻 ...
HTML 5 拖放(Drag 和drop)
瀏覽器支持 Internet Explorer 9.Firefox.Opera 12.Chrome 以及 Safari 5. 1.把標簽 draggable 屬性設置為 true. 2.向標簽添加on ...
Android開發者指南-用戶界面-拖放-Drag and Drop[原創譯文]
英文原文:http://developer.android.com/guide/topics/ui/drag-drop.html 版本:Android 4.0 r1 譯者注:黃色底色為未決譯文 快 ...
HTML5拖放(drag和drog)作品
隨機推薦
【推薦】CentOS安裝Subversion-1.8.11+HTTP協議支持配置
注:以下所有操作均在CentOS 6.5 x86_64位系統下完成. 我們需要搭建一個自己的SVN服務器. 此外,搭建好的SVN服務器除了需要支持svn協議外,最好還需要支持HTTP協議和HTTPS協 ...
Linux screen 命令
簡單的來說 在screen里面敲的命令都是在后臺的,所以不需要想bg那樣,ctrl+z在bg把后臺服務運行起來.而且下次可以直接進去screen作業的后臺界面,可以看到我們過去敲的命令記錄,即使你的C ...
Python + OpenCV2 系列：1 - 配置
Python+OpenCV2+Eclipse+Windos 8.1(32bits): 最初的目的是做圖像處理,opencv強大的社區支持,讓我想從matlab轉到opencv框架下進行試驗,而Pyth ...
[zz] demand require request用法辨析
http://zhidao.baidu.com/link?url=9Q50HiOF1fWav1nSnREbc_H1jTuAHxAjeVLbZoB5bGO3ZehPxLhQdob4oGO3slMRl0W ...
Symfony VarDumper Component
Symfony VarDumper 類似 php var_dump() 官方文檔寫的安裝方法 : 按照步驟 就可以在?running any PHP code ?時候使用了 In order to h ...
linux網絡編程之TCP/IP基礎
(一):TCP/IP協議棧與數據包封裝 一.ISO/OSI參考模型 OSI(open system interconnection)開放系統互聯模型是由ISO(International Organi ...
Akka(7)： FSM：通過狀態變化來轉換運算行為
在上篇討論里我們提到了become/unbecome.由于它們本質上是堆棧操作,所以只能在較少的狀態切換下才能保證堆棧操作的協調及維持程序的清晰邏輯.對于比較復雜的程序流程,Akka提供了FSM:一種 ...
機器學習入門17 - 嵌套 (Embedding)
原文鏈接:https://developers.google.com/machine-learning/crash-course/embeddings/ 嵌套是一種相對低維的空間,可以將高維矢量映射到 ...
wav文件格式分析與詳解
WAV文件是在PC機平臺上很常見的.最經典的多媒體音頻文件,最早于1991年8月出現在Windows 3.1操作系統上,文件擴展名為WAV,是WaveFom的簡寫,也稱為波形文件,可直接存儲聲音波形, ...
總結
以上是生活随笔為你收集整理的html拖放数据库字段,HTML5 拖放（Drag 和 Drop）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 华为手机Android系统优缺点,第一次
- 下一篇： 2017年html5行业报告,云适配发布