国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

HTML5 拖放、交換位置

番茄西紅柿 / 1326人閱讀

摘要:放到何處放到何處事件規定在何處放置被拖動的數據。如果需要設置允許放置,我們必須阻止對元素的默認處理方式。注釋在中不支持拖放。

設置元素為可拖放

draggable 屬性設置為 true:

    <img draggable="true" />
拖動什么 - ondragstart 和 setData()
dataTransfer.setData() 方法設置被拖數據的數據類型和值:

    function drag(e) {
        e.dataTransfer.setData("text/html", value);
    }
注:"text/html"參數,我在Mac上用Safari打開,遇到過不能正常解析,解決方法把html和text位置互換一下。
放到何處 - ondragover
ondragover 事件規定在何處放置被拖動的數據。
默認地,無法將數據/元素放置到其他元素中。如果需要設置允許放置,我們必須阻止對元素的默認處理方式。

  event.preventDefault();
進行放置 - ondrop
調用 preventDefault() 來避免瀏覽器對數據的默認處理(drop 事件的默認行為是以鏈接形式打開)
通過 dataTransfer.getData("text/html") 方法獲得被拖的數據。該方法將返回在 setData() 方法中設置為相同類型的任何數據。

function drop(e) {
    e.preventDefault();
}
瀏覽器支持
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。

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

示例:

Example1:
DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style type="text/css">
    html,
    body {
        margin: 0;
        padding: 0;
    }
    .drag {
        width: 50px;
        height: 50px;
        background: blue;
        display: inline-block;
        margin: 10px;
        color: white;
        font-size: 20px;
        text-align: center;
        line-height: 50px;
        cursor: move;
    }
    style>
head>

<body>
    <div class="drag drag1" draggable="true" ondragstart="drag(event, this)" ondragover="allowDrop(event)" ondrop="drop(event,this)">1div>
    <div class="drag drag2" draggable="true" ondragstart="drag(event, this)" ondragover="allowDrop(event)" ondrop="drop(event,this)">2div>
    <div class="drag drag3" draggable="true" ondragstart="drag(event, this)" ondragover="allowDrop(event)" ondrop="drop(event,this)">3div>

    <script type="text/javascript">
        var srcEl = null;
        function drag(e, el) {
            srcEl = el;
            e.dataTransfer.setData("text/html", el.innerHTML);
        }
        function drop(e, el){
            e.preventDefault();
            // e.stopPropagation();
            if (srcEl != el) {
                srcEl.innerHTML = el.innerHTML;
                el.innerHTML = e.dataTransfer.getData("text/html");
            }
        }
        function allowDrop(e) {
            e.preventDefault();
        }
    script>
body>

html>
Example2:
DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style type="text/css">
    html,
    body {
        margin: 0;
        padding: 0;
    }

    #div1 {
        width: 300px;
        height: 300px;
        border: 1px solid red;
    }

    #drag1 {
        width: 300px;
        height: 300px;
    }
    style>
head>

<body>
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">div>
    <img id="drag1" draggable="true" ondragstart="drag(event)"
        src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=175152409,3501278703&fm=27&gp=0.jpg" />
    <script type="text/javascript">
    function drag(e) {
        e.dataTransfer.setData("text/html", e.target.id);
    }

    function drop(e) {
        e.preventDefault();
        e.stopPropagation();
        var id = e.dataTransfer.getData(text/html);
        e.target.appendChild(document.getElementById(id));
    }

    function allowDrop(e) {
        e.preventDefault();
    }
    script>
body>

html>

 W3school原文鏈接:http://www.w3school.com.cn/html5/html_5_draganddrop.asp

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/2075.html

相關文章

  • HTML5 原生拖放

    摘要:發展原生拖放的發展大致可分為三個階段。在的實例基礎上,進一步制定了拖放的規范。也根據規范實現了原生拖放功能。被拖動的元素在放置目標范圍內移動時,會持續觸發該事件。參考資料拖放操作拖拽操作拖拽類型列表高級程序設計第版第章腳本編程原生拖放 發展 原生拖放的發展大致可分為三個階段:IE4、IE5+、HTML5。 IE4 是最早在網頁中引入 JavaScript 拖放功能的,當時只有圖像和選中...

    Thanatos 評論0 收藏0
  • JavaScript HTML5腳本編程——“原生拖放”的注意要點

    摘要:在中,唯一有效的放置目標是文本框。以的實例為基礎指定了拖放規范。觸發事件后,隨即會觸發事件,而且在元素被拖動期間會持續發送該事件。指定一副圖像,當拖動發生時,顯示在光標下方。 最早在網頁中引入JavaScript拖放功能是IE4。當時,網頁中只有兩種對象可以拖放:圖像和某些文本。在IE4中,唯一有效的放置目標是文本框。到了IE5,拖放功能得到拓展,添加了新的事件,而且幾乎網頁中的任何元...

    forsigner 評論0 收藏0
  • HTML5新特性

    摘要:年月日,萬維網聯盟宣布,標準規范制定完成。作為一種超文本標記語言,已經成為了上使用的通用標記語言,而在這次的規范中,為開發者帶來了一些令人興奮的新特性。 2014年10月29日,W3C(萬維網聯盟)宣布,HTML5標準規范制定完成。作為一種超文本標記語言,HTML已經成為了Web上使用的通用標記語言,而在這次HTML5的規范中,為開發者帶來了一些令人興奮的新特性。 下面簡單地介紹下這些...

    bang590 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<