超碰97免费资源站,中文不卡无码免费,伊人久久97

HTML5拖拽事件

1. 設(shè)置拖拽

圖片自帶拖拽功能
其他元素可設(shè)置draggable屬性

<div draggable="true">
    
</div>

<style>
    #box {
      position: fixed;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>

<body>
  <div draggable="true" id="box"></div> <!-- draggable給div設(shè)置拖拽，希望是ture必須明確寫上true -->
</body>

例子:

box.ondragend = function (e) {
    box.style.cssText = 'top:' + (e.clientY) + 'px;left:' + (e.clientX) + 'px'

}

  <style>
    #box {
      position: fixed;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>

<body>
  <div draggable="true" id="box"></div> <!-- draggable實現(xiàn)拖拽功能，希望是ture必須明確寫上true -->

<script>
  //js實現(xiàn)元素拖到那兒就定位到哪
  box.ondragend = function (e) {  //ondragend是js拖拽事件，松開鼠標(biāo)哪一刻就會觸發(fā)這個事件，獲取事件對象，獲得元素距離瀏覽器左側(cè)、頂端的距離
    // this.style.top =`${e.clientY}px`//這種寫法實際是將鼠標(biāo)所在點的值給了元素距離左側(cè)和上部，不準(zhǔn)確
    // this.style.left =`${e.clientX}px`
    // box.style.cssText = 'top:' + (e.clientY) + 'px;left:'+(e.clientX)+'px'//js中設(shè)置css樣式的文本
    this.style.cssText = `top:${e.clientY}px;left:${e.clientX}px`//js中設(shè)置css樣式的文本
  }
</script>
</body>

1.1. 拖拽元素(被拖拽元素對象)事件 :

ondragstart : 拖拽前觸發(fā) ,事件只觸發(fā)一次
ondrag :拖拽前、拖拽結(jié)束之間，連續(xù)觸發(fā)
ondragend :拖拽結(jié)束觸發(fā) ,事件只觸發(fā)一次

const box = document.getElementById('box');

// dragstart 拖拽開始時觸發(fā),只觸發(fā)一次
box.ondragstart = function () {
    this.style.background = 'blue';

}

// drag拖拽觸發(fā)的事件,連續(xù)觸發(fā),只要鼠標(biāo)不松開會一直觸發(fā)
box.ondrag = function () {
    this.style.background = 'yellow';
}

// dragend 拖拽結(jié)束時,觸發(fā)的事件,只要鼠標(biāo)一松開就觸發(fā)
box.ondragend = function () {
    this.style.background = 'skyblue';
}

Element UI 拖拽排序

https://element.eleme.cn/#/zh-CN ---》組件（菜單）---》Tree樹形控件---》可拖拽節(jié)點（右側(cè)）

1.2. 目標(biāo)元素(拖拽元素被拖到的對象)事件 ----[H5拖拽的容器事件]

ondragenter :進(jìn)入目標(biāo)元素觸發(fā)
ondragover :進(jìn)入目標(biāo)、離開目標(biāo)之間，連續(xù)觸發(fā)
ondragleave :離開目標(biāo)元素觸發(fā)
ondrop :在目標(biāo)元素上釋放鼠標(biāo)觸發(fā)

// dragenter 拖拽元素移入目標(biāo)元素時觸發(fā),鼠標(biāo)進(jìn)入才算哦
wrap.ondragenter = function () {
    this.innerHTML = '釋放鼠標(biāo)';
}

// dragove  拖拽的元素在目標(biāo)元素中觸發(fā),會連續(xù)觸發(fā)
wrap.ondragover = function (e) {
    this.style.background = '#999';
    console.log(num++);
    // e.preventDefault();
    return false;
}

// dragleave  拖拽的元素離開目標(biāo)元素時觸發(fā),鼠標(biāo)離開才算
wrap.ondragleave = function () {
    this.innerHTML = '請將元素拖進(jìn)來';
}

// drop  在目標(biāo)元素中松口鼠標(biāo)觸發(fā),如果要觸發(fā)這個事件,必須先將drapover事件取消默認(rèn)事件
wrap.ondrop = function () {
    this.style.background = 'skyblue';
    console.log('你在目標(biāo)元素中松口了鼠標(biāo)');
    document.body.removeChild(box);
}

<style>
    #box {
      position: fixed;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;
      background-color: red;
    }

    #wrap {
      position: fixed;
      top: 0;
      right: 0;
      width: 500px;
      height: 300px;
      background-color: rgba(100, 100, 100, .2);
    }
  </style>
</head>

<body>
  <div draggable="true" id="box"></div>
  <div id="wrap"></div>
  <script>
    box.ondragstart = function () {
      console.log('開始拖拽……');
      this.style.background = 'blue';
    }
    box.ondrag = function () {
      console.log('正在拖拽……')
      this.style.background = 'yellow'
    }
    box.ondragend = function (e) {
      console.log('拖拽完畢……');
      this.style.background = 'skyblue';
    }
    //目標(biāo)元素(容器)的四個事件
    wrap.ondragenter = function () {//元素拖入
      this.innerHTML = '請釋放鼠標(biāo)';
    }
    wrap.ondragleave = function () {//元素離開
      this.innerHTML = '請將元素拖進(jìn)來';
    }
    let num = 0;
    wrap.ondragover = function (e) {//在里面移動
      this.style.background = 'skyblue';
      console.log('num', num++)  //在里面時num一直在++
      e.preventDefault()//清除默認(rèn)事件，拖拽時要阻止默認(rèn)事件，才會觸發(fā)鼠標(biāo)松開ondrop
      // return false;//阻止默認(rèn)事件
    }
    wrap.ondrop = function () {//鼠標(biāo)松開
      this.style.background = 'pink';
      console.log('你在目標(biāo)元素中松開了鼠標(biāo)');
      document.body.removeChild(box);//拖拽完畢后在body里刪除原來的box元素
    }
  </script>
</body>

2. 拖拽兼容問題

只作為了解, 因為現(xiàn)在火狐已經(jīng)沒有兼容問題

火狐瀏覽器下需設(shè)置dataTransfer對象才可以拖拽除圖片外的其他標(biāo)簽

火狐在沒有添加dataTransfer前不能使用ondrag和ondragend事件,其他都可以

  <style>
    #box {
      position: fixed;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;
      background-color: red;
    }

    #wrap {
      position: fixed;
      top: 0;
      right: 0;
      width: 500px;
      height: 300px;
      background-color: rgba(100, 100, 100, .2);
    }
  </style>
</head>

<body>
  <div draggable="true" id="box"></div>
  <div id="wrap"></div>
  <script>
    box.ondragstart = function (e) {
      console.log('開始拖拽……');
      //火狐老版本兼容問題需要線獲取dataTransfer對象
      let data = e.dataTransfer;
      console.log(data)
      this.style.background = 'blue';
    }
    box.ondrag = function () {
      console.log('正在拖拽……')
      this.style.background = 'yellow'
    }
    box.ondragend = function (e) {
      console.log('拖拽完畢……');
      this.style.background = 'skyblue';
    }
    //目標(biāo)元素(容器)的四個事件
    wrap.ondragenter = function () {//元素拖入
      this.innerHTML = '請釋放鼠標(biāo)';
    }
    wrap.ondragleave = function () {//元素離開
      this.innerHTML = '請將元素拖進(jìn)來';
    }
    let num = 0;
    wrap.ondragover = function (e) {//在里面移動
      this.style.background = 'skyblue';
      console.log('num', num++)  //在里面時num一直在++
      e.preventDefault()//清除默認(rèn)事件，拖拽時要阻止默認(rèn)事件，才會觸發(fā)鼠標(biāo)松開ondrop
      // return false;//阻止默認(rèn)事件
    }
    wrap.ondrop = function () {//鼠標(biāo)松開
      this.style.background = 'pink';
      console.log('你在目標(biāo)元素中松開了鼠標(biāo)');
      document.body.removeChild(box);//拖拽完畢后在body里刪除原來的box元素
    }
  </script>
</body>

2.1. dataTransfer對象

dataTransfer 是拖拽事件對象的屬性

setData() : 設(shè)置數(shù)據(jù) key和value(必須是字符串)
getData() : 獲取數(shù)據(jù)，根據(jù)key值，獲取對應(yīng)的value

  <style>
    #box {
      position: fixed;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;
      background-color: red;
    }

    #wrap {
      position: fixed;
      top: 0;
      right: 0;
      width: 500px;
      height: 300px;
      background-color: rgba(100, 100, 100, .2);
    }
  </style>
</head>

<body>
  <div draggable="true" id="box"></div>
  <div id="wrap"></div>
  <script>
    box.ondragstart = function (e) {
      console.log('開始拖拽……');
      let data = e.dataTransfer;
      let color = '#' + Math.random().toString(16).substr(2, 6);
      data.setData('color', color)// 通過dataTransfer對象保存數(shù)據(jù)     setData() : 設(shè)置數(shù)據(jù) key和value(必須是字符串)
      console.log(data)
     
      data.effectAllowed = 'copyMove'; //拖動時改變光標(biāo)樣式
      this.style.background = 'blue';
    }
    box.ondrag = function () {
      console.log('正在拖拽……')
      this.style.background = 'yellow'
    }
    box.ondragend = function (e) {
      console.log('拖拽完畢……');
      this.style.background = 'skyblue';
    }
    //目標(biāo)元素(容器)的四個事件
    wrap.ondragenter = function () {
      this.innerHTML = '請釋放鼠標(biāo)';
    }
    wrap.ondragleave = function () {
      this.innerHTML = '請將元素拖進(jìn)來';
    }
    let num = 0;
    wrap.ondragover = function (e) {
      this.style.background = 'skyblue';
      console.log('num', num++)
      e.preventDefault()
    }
    wrap.ondrop = function (e) {
      let color = e.dataTransfer.getData('color')//getData() : 獲取數(shù)據(jù)，根據(jù)key值，獲取對應(yīng)的value
      this.style.background = color;
      console.log('你在目標(biāo)元素中松開了鼠標(biāo)');
      document.body.removeChild(box);
    }
  
  </script>
</body>

box.ondragstart = function (e) {
    this.style.background = 'blue';
    e.dataTransfer.setData('key', this.id);
    // 火狐必須加上這一行代碼才能觸發(fā)drag和dragend事件
}

// 設(shè)置的key在這里可以使用
wrap.ondrop = function (e) {
    this.style.background = 'skyblue';
  document.body.removeChild(document.getElementById(e.dataTransfer.getData('key')))//確定刪除被拖進(jìn)來的是哪個元素：先通過e.dataTransfer.getData('key')獲取字符串--》再獲取被拖的是哪個元素--》刪除被拖的元素
}

effectAllowed : 設(shè)置光標(biāo)樣式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)

，參考上面的例子

 box.ondragstart = function (e) {
    console.log(e.dataTransfer);
    e.dataTransfer.effectAllowed = 'link';
}

設(shè)置拖拽元素影子的樣式 setDragImage ：三個參數(shù)（指定哪個元素作為影子可以是圖片，坐標(biāo)X，坐標(biāo)Y）

   box.ondragstart = function (e) {
       console.log(e.dataTransfer);
       e.dataTransfer.setDragImage(img, 100, 100);
   }

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #box {
      position: fixed;
      top: 100px;
      left: 0;
      width: 100px;
      height: 100px;
      background-color: red;
    }

    #wrap {
      position: fixed;
      top: 0;
      right: 0;
      width: 500px;
      height: 300px;
      background-color: rgba(100, 100, 100, .2);
    }
  </style>
</head>

<body>
  <img src="./images/333.jpg" id='img' width=100 height=100 alt="">
  <div draggable="true" id="box"></div>
  <div id="wrap"></div>
  <script>
    box.ondragstart = function (e) {
      console.log('開始拖拽……');
      let data = e.dataTransfer;
      let color = '#' + Math.random().toString(16).substr(2, 6);
      data.setData('color', color)
      console.log(data)

      //設(shè)置拖拽陰影的背景
      data.setDragImage(img, 0, 0)

      this.style.background = 'blue';
    }
    box.ondrag = function () {
      console.log('正在拖拽……')
      this.style.background = 'yellow'
    }
    box.ondragend = function (e) {
      console.log('拖拽完畢……');
      this.style.background = 'skyblue';
    }
    //目標(biāo)元素(容器)的四個事件
    wrap.ondragenter = function () {
      this.innerHTML = '請釋放鼠標(biāo)';
    }
    wrap.ondragleave = function () {
      this.innerHTML = '請將元素拖進(jìn)來';
    }
    let num = 0;
    wrap.ondragover = function (e) {
      this.style.background = 'skyblue';
      console.log('num', num++)
      e.preventDefault()
    }
    wrap.ondrop = function (e) {
      let color = e.dataTransfer.getData('color')
      this.style.background = color;
      console.log('你在目標(biāo)元素中松開了鼠標(biāo)');
      document.body.removeChild(box);
    }
  </script>
</body>

files：獲取外部拖拽的文件，返回一個filesList列表
filesList下有個type屬性，返回文件的類型

wrap.ondrop = function (e) {
    const dt = e.dataTransfer;
    console.log(dt.files)
    return false;
}

 <style>
    * {
      margin: 0;
      padding: 0;
    }
    #box {
  position: fixed;
  top: 100px;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: red;
}

#wrap {
  position: fixed;
  top: 0;
  right: 0;
  width: 500px;
  height: 300px;
  background-color: rgba(100, 100, 100, .2);
}
</style>
</head>

<body> 
  <img src="./images/333.jpg" id='img' width=100 height=100 alt="">

  <div draggable="true" id="box"></div>
  <div id="wrap"></div>
  <script>
    box.ondragstart = function (e) {
      console.log('開始拖拽……');
      let data = e.dataTransfer;
      let color = '#' + Math.random().toString(16).substr(2, 6);
      data.setData('color', color)
      console.log(data)
      data.setDragImage(img, 0, 0)


      this.style.background = 'blue';
    }
    box.ondrag = function () {
      console.log('正在拖拽……')
      this.style.background = 'yellow'
    }
    box.ondragend = function (e) {
      console.log('拖拽完畢……');
      this.style.background = 'skyblue';
    }
    //目標(biāo)元素(容器)的四個事件
    wrap.ondragenter = function () {
      this.innerHTML = '請釋放鼠標(biāo)';
    }
    wrap.ondragleave = function () {
      this.innerHTML = '請將元素拖進(jìn)來';
    }
    let num = 0;
    wrap.ondragover = function (e) {
      this.style.background = 'skyblue';
      console.log('num', num++)
      e.preventDefault()
    }
    wrap.ondrop = function (e) {
      console.log(e.dataTransfer.files)//元素拖進(jìn)來了，可以打印文件的名字，拖進(jìn)來的文件可以是任何外部的文件
      let color = e.dataTransfer.getData('color')
      this.style.background = color;
      console.log('你在目標(biāo)元素中松開了鼠標(biāo)');
      document.body.removeChild(box);
    }

  </script>
</body>

3. 讀取讀取文件信息

通過FileReader對象可以讀取本地存儲的文件信息, 使用File對象指定要讀取的文件數(shù)據(jù)

3.1.FileReader(讀取文件信息)

HTML5 新增的內(nèi)置構(gòu)造函數(shù),可以讀取本地文件的信息

方法:

readAsDataURL
參數(shù)為要讀取的文件對象

onload當(dāng)讀取文件成功完成的時候觸發(fā)此事件

this. result 獲取讀取的文件數(shù)據(jù)

wrap.ondrop = function (e) {
    const dt = e.dataTransfer;
    const oFile = dt.files.item(0);

    // 創(chuàng)建讀取文件對象
    const file = new FileReader();

    // 獲取文件的url
    file.readAsDataURL(oFile)
    
    // 當(dāng)信息讀取完成后執(zhí)行
    file.onload = function () {
        // console.log(oFile);
        if (oFile.type.includes('image')) {
            const img = new Image();
            img.src = file.result;
            wrap.appendChild(img)
        }

    }
    return false;
}

性能低,沒有必要吧這些字符串渲染到頁面中

讀取拖入的圖片信息，并顯示在頁面上

 <style>
    #wrap {
      width: 400px;
      height: 100px;
      background-color: #ccc;
      color: #fff;
      text-align: center;
      line-height: 100px;
      font-size: 30px;
      margin: 10px auto;

    }

    #wraps img {
      width: 100px;
      height: 100px;
    }
  </style>
</head>

<body>
  <div id="wrap">請將文件拖入到此處</div>
  <div id="wraps"></div>
  <script>
    wrap.ondrop = function (ev) {
      //1.獲取拖入文件的文件對象
      // let datafile =ev.dataTransfer.files[0] //獲取拖入的文件方法一
      let dataFile = ev.dataTransfer.files.item(0) //獲取拖入文件方法二
      console.log(dataFile)//通過文件對象可以看到文件信息
      //創(chuàng)建讀取文件對象
      let files = new FileReader();
      console.log(files);
      //讀文本信息
      // files.readAsText(dataFile)
      // files.onload = function(){
      //   console.log(this)
      // }
      //讀取文件url信息
      files.readAsDataURL(dataFile)

      // 讀取成功后觸發(fā)事件
      files.onload = function () {
        console.log('files', this)   //result可以看到圖片的base64信息，base64可以減少請求次數(shù)
        let img = new Image();
        img.src = this.result;
        wraps.appendChild(img)//把圖片加到頁面上去,在頁面中顯示
      }
    }
    /*阻止圖片拖入瀏覽器后默認(rèn)打開*/
    document.addEventListener('drop', function (e) {
      e.preventDefault()
    }, false)
    document.addEventListener('dragover', function (e) {
      e.preventDefault()
    }, false)
  </script>
</body>

  <style>
    #wrap {
      width: 400px;
      height: 100px;
      background-color: #ccc;
      color: #fff;
      text-align: center;
      line-height: 100px;
      font-size: 30px;
      margin: 10px auto;

    }

    #wraps img,
    #wraps div {
      width: 100px;
      height: 100px;
    }

    #wraps div {
      display: inline-block;
      background-color: pink;
      vertical-align: top;
      /* 默認(rèn)基線對齊，改為頂部對齊 */
    }
  </style>
</head>

<body>
  <div id="wrap">請將文件拖入到此處</div>
  <div id="wraps"></div>
  <script>
    wrap.ondrop = function (ev) {
      //多文件的讀取
      let dataFiles = [...ev.dataTransfer.files] //多個文件      
      console.log(dataFiles)//通過文件對象可以看到文件信息

      dataFiles.forEach(file => {
        console.log('file', file);
        let files = new FileReader();
        console.log(files)
        //判斷是否為圖片
        if (file.type.includes('image')) {

          //讀取文件url信息
          files.readAsDataURL(file)
          // 讀取成功后觸發(fā)事件
          files.onload = function () {
            console.log('files', this)   //result可以看到圖片的base64信息，base64可以減少請求次數(shù)
            let img = new Image();
            img.src = this.result;
            wraps.appendChild(img)//把圖片加到頁面上去,在頁面中顯示
          }
        }

        else {
          //讀文本信息
          files.readAsText(file)
          files.onload = function () {
            let div = document.createElement('div')
            div.innerHTML = this.result;
            wraps.appendChild(div)
          }
        }
      })
    }
    /*阻止圖片拖入瀏覽器后默認(rèn)打開*/
    document.addEventListener('drop', function (e) {
      e.preventDefault()
    }, false)
    document.addEventListener('dragover', function (e) {
      e.preventDefault()
    }, false)
  </script>
</body>

多文件的拖入上傳

  <style>
    #wrap {
      width: 400px;
      height: 100px;
      background-color: #ccc;
      color: #fff;
      text-align: center;
      line-height: 100px;
      font-size: 30px;
      margin: 10px auto;

    }

    #wraps img,
    #wraps div {
      width: 100px;
      height: 100px;
    }

    #wraps div {
      display: inline-block;
      background-color: pink;
      vertical-align: top;
      /* 默認(rèn)基線對齊，改為頂部對齊 */
    }
  </style>
</head>

<body>
  <div id="wrap">請將文件拖入到此處</div>
  <div id="wraps"></div>
  <script>
    wrap.ondrop = function (ev) {
      //多文件的讀取
      let dataFiles = [...ev.dataTransfer.files] //多個文件      
      console.log(dataFiles)//通過文件對象可以看到文件信息

      dataFiles.forEach(file => {
        console.log('file', file);
        let files = new FileReader();
        console.log(files)
        //判斷是否為圖片
        if (file.type.includes('image')) {

          //讀取文件url信息
          files.readAsDataURL(file)
          // 讀取成功后觸發(fā)事件
          files.onload = function () {
            console.log('files', this)   //result可以看到圖片的base64信息，base64可以減少請求次數(shù)
            let img = new Image();
            img.src = this.result;
            wraps.appendChild(img)//把圖片加到頁面上去,在頁面中顯示
          }
        }

        else {
          //讀文本信息
          files.readAsText(file)
          files.onload = function () {
            let div = document.createElement('div')
            div.innerHTML = this.result;
            wraps.appendChild(div)
          }
        }
      })
    }
    /*阻止圖片拖入瀏覽器后默認(rèn)打開*/
    document.addEventListener('drop', function (e) {
      e.preventDefault()
    }, false)
    document.addEventListener('dragover', function (e) {
      e.preventDefault()
    }, false)
  </script>
</body>

3.2 利用表單域來讀取文件

Files對象

表單域返回的DOM元素身上有一個files的屬性,這個屬性值就是一個Files對象, 里面保存選中的文件的信息

<input type="file" name="file" multiple />

<script>
    var file = document.querySelector("input")

    file.addEventListener("change",function(){
        console.log(this.files)
    },false)

</script>

FileReader對象

利用FileReader讀取信息

file.addEventListener("change",function(){
    console.log(this.files)
    var oFile = this.files[0]
    var readfile = new FileReader()

    readfile.readAsDataURL(oFile)
    readfile.onload = function(){
        var img = new Image()
        img.src= this.result;
        box.appendChild(img)
    }
},false)

  <style>
    #wrap {
      width: 400px;
      height: 100px;
      background-color: #ccc;
      color: #fff;
      text-align: center;
      line-height: 100px;
      font-size: 30px;
      margin: 10px auto;
    }
    #wraps img,
    #wraps div {
      width: 100px;
      height: 100px;
    }
    #wraps div {
      display: inline-block;
      background-color: pink;
      vertical-align: top;
      /* 默認(rèn)基線對齊，改為頂部對齊 */
    }
  </style>
</head>

<body>
  <!-- 不用鼠標(biāo)拖拽，用input選擇文件 -->
  <input type="file" name="" id="file" multiple> <!-- multiple代表可以一次選多張圖片 -->
  <div id="wraps"></div>
   <script>
    file.onchange = function () { //文件一旦改變會觸發(fā)事件,會讀取到文件
      console.log(this.files)
      //多文件的讀取
      let dataFiles = [...this.files] //多個文件      
      console.log(dataFiles)//通過文件對象可以看到文件信息

      dataFiles.forEach(file => {
        console.log('file', file);
        let files = new FileReader();
        console.log(files)
        //判斷是否為圖片
        if (file.type.includes('image')) {

          //讀取文件url信息
          files.readAsDataURL(file)
          // 讀取成功后觸發(fā)事件
          files.onload = function () {
            console.log('files', this)   //result可以看到圖片的base64信息，base64可以減少請求次數(shù)
            let img = new Image();
            img.src = this.result;
            wraps.appendChild(img)//把圖片加到頁面上去,在頁面中顯示
          }
        }

        else {
          //讀文本信息
          files.readAsText(file)
          files.onload = function () {
            let div = document.createElement('div')
            div.innerHTML = this.result;
            wraps.appendChild(div)
          }
        }
      })
    }
  </script>
</body>

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

HTML5拖拽事件

HTML5拖拽事件

HTML5拖拽事件

1. 設(shè)置拖拽

1.1. 拖拽元素(被拖拽元素對象)事件 :

Element UI 拖拽排序

1.2. 目標(biāo)元素(拖拽元素被拖到的對象)事件 ----[H5拖拽的容器事件]

2. 拖拽兼容問題

2.1. dataTransfer對象

3. 讀取讀取文件信息

3.1.FileReader(讀取文件信息)

3.2 利用表單域來讀取文件

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

HTML5拖拽事件

HTML5拖拽事件

1. 設(shè)置拖拽

1.1. 拖拽元素(被拖拽元素對象)事件 :

Element UI 拖拽排序

1.2. 目標(biāo)元素(拖拽元素被拖到的對象)事件 ----[H5拖拽的容器事件]

2. 拖拽兼容問題

2.1. dataTransfer對象

3. 讀取讀取文件信息

3.1.FileReader(讀取文件信息)

3.2 利用表單域來讀取文件

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av