初學HTML5 拖放(Drag 和 Drop)

2021-07-22 10:07:55 字數 916 閱讀 3066

internet explorer 9+, firefox, opera, chrome, 和 safari 支援拖動。

注意:safari 5.1.2不支援拖動.

id="drag1"

src="/images/logo.png"

draggable="true"

ondragstart="drag(event)"

width="336"

height="69">

2、其中的ondragstart()函式定義了拖動時呼叫的函式。

當拖動該是,呼叫drag(envent)函式,該函式中可定義被拖動的資料。

drag(envent)函式定義如下:

function drag(ev)

3、設定「允許拖放進來」:在要被放入的元素設定ondragover()函式,設定當拖動元素到達自己範圍時的行為。

由於任何元素預設是「不允許拖放元素進來」,所以要使用preventdefault()函式來「取消預設」。

可以自定義alowdrop函式來取消預設、允許降落,使用方式如下:

ondragover="allowdrop(event)">拖放元素的容器div>

function

allowdrop

(ev)

script>4、進行放置:使用ondrop設定當有元素要降落在自己範圍內時要發生什麼。

如下,當有元素拖放過來時,該div會呼叫drop(ev)函式。

ondrop="drop(event)"

ondragover="allowdrop(event)">

div>5、接著要設定drop(event)函式,時拖放過來的資料被正確找到並追加。

前端 html5 拖放(Drag 和 Drop)

拖放 drag 和 drop 是 html5 標準的組成部分。首先看個例項 拖動 logo 到矩形框中 首先,為了使元素可拖動,把 draggable 屬性設定為 true 然後,規定當元素被拖動時,會發生什麼。在上面的例子中,ondragstart 屬性呼叫了乙個函式,drag event 它規定...

HTML5 拖放(Drag 和 Drop)用法

拖放 drag 和 drop 是 html5 標準的組成部分。設定元素為可拖放 1,拖動什麼 ondragstart 和 setdata 然後,規定當元素被拖動時,會發生什麼。在上面的例子中,ondragstart 屬性呼叫了乙個函式,drag event 它規定了被拖動的資料。datatransf...

HTML 5入門知識 Drag

html 5拖放 拖放的步驟 1 物件元素的draggable屬性設定為true,還需要注意的是a元素和img元素必須指定href。2 編寫與拖放有關的事件處理 datatransfer物件的屬性和方法 設定拖放時的視覺效果 dropeffect屬性與effectallowed屬性結合起來可以設定拖...