您的位置 >>> 星想互聯 >>> 編程技術 >>> JQUERY+JS
H5拖放
點擊數:185  發布時間2020-03-22 19:30:11

拖放(Drag drop)是 HTML5 標準的組成部分,任何元素都能夠拖放。

下面,我們先分別研究拖放事件的不同部分。

首先,設置元素的樣式和HTML結構:

  <style>

    #ele { width: 50px;height: 50px;background: #f00;}

#box{width:500px;height:300px;border:1px solid #ccc;margin:200px 400px;}

  </style>

  <div id='ele' draggable="true">拖動對象</div>

  <div id='box'>容器</div>

 

設置元素為可拖放

為了使元素可拖動,把 draggable 屬性設置為 true

<div id='ele' draggable="true"></div>

在拖動之前,我們還要在JS中獲取二個元素:

    var ele=document.getElementById('ele');

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

 

拖動什么 - ondragstart setData()

當元素被拖動時,會發生什么?ondragstart 指的是拖動發生時監聽的事件。

接下來,可以先測試一下:

  <script>

    ele.ondragstart=function(e){

      console.log(111);

    }

  </script>

測試結果很清楚,一旦拖動了ele,控制臺就會輸出字符。

 

事實上,我們準備使用ondragstart 調用一個函數,它規定了被拖動的數據。

dataTransfer.setData() 方法可以用來設置被拖數據的數據類型和值:

  <script>

    ele.ondragstart=function(e){

      e.dataTransfer.setData('id',e.target.id)

    }

  </script>

在這里,傳遞的數據名 "id",值是可拖動的元素:e.target.id

放到何處 - ondragover

ondragover 事件規定在何處放置被拖動的數據。

ondragover 事件是寫在容器上,而不是拖動的元素。我們也來測試一下:

  <script>

    box.ondragover=function(e){

      // e.preventDefault();

      console.log('ffff');

    }

  </script>

我們發現,當把上面的小方塊拖動到容器中時,控制臺輸出了字符。

默認地,無法將數據/元素放置到其他元素中。如果需要設置允許放置,我們必須阻止對元素的默認處理方式。

這要通過調用 ondragover 事件的 event.preventDefault() 方法:

進行放置 - ondrop

當放置被拖數據時,會監聽ondrop 事件,ondrop事件也是寫在容器上。

讓我們也來測試一下這個事件:

  <script>

    box.ondrop=function(e){

 console.log('ffff');

    }

  </script>

這一次,當我們把上面的松開小方塊時,控制臺輸出了字符。

ondrop 屬性調用了一個函數:

    box.ondrop=function(e){

      e.preventDefault();

      var data=e.dataTransfer.getData("id");

      e.target.appendChild(document.getElementById(data));

    }

對這一段代碼我們解釋一下

調用 preventDefault() 來避免瀏覽器對數據的默認處理(drop 事件的默認行為是以鏈接形式打開)

通過 dataTransfer.getData("id") 方法獲得被拖的數據。該方法將返回在 setData() 方法中設置為相同類型的任何數據。

被拖數據是被拖元素的 id ,我們使用data=e.dataTransfer.getData("id")來獲得。

把被拖元素追加到容器(目標元素)中

 

JS完整代碼如下:

  <script>

    var ele=document.getElementById('ele');

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

 

    ele.ondragstart=function(e){

      e.dataTransfer.setData('id',e.target.id)

    }

 

    box.ondragover=function(e){

      e.preventDefault();

    }

 

    box.ondrop=function(e){

      e.preventDefault();

      var data=e.dataTransfer.getData("id");

      e.target.appendChild(document.getElementById(data));

    }

  </script>

 

下面我們給一個案例,實現一個方塊的來回拖動:

<!DOCTYPE HTML>

<html>

<head>

<style type="text/css">

#div1,#div2{float:left;width:198px; height:66px; margin:8px;border:1px solid #aaa;}

#drag1{width:40px;height:40px;background:#f00;}

</style>

  <script type="text/javascript">

    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));

    }

  </script>

</head>

<body>

  <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">

    <div draggable="true" ondragstart="drag(event)" id="drag1" />

  </div>

  </div>

  <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>

</html>

來源:咸寧網站建設
【上一篇】本地存儲localStorage
【下一篇】鼠標拖曳特效
日本高清成 人,A级高清毛片av无码,欧美成 人 免费在线播放-首页 <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>