h5拖放 #html5 #拖放

h5拖放

2016-05-12 14:14:06

<!DOCTYPE HTML>

<html >

<head>

#div1,#div2 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}

</style>

function allowDrop(ev)

{

ev.preventDefault();

}

function drag(ev)

ev.dataTransfer.setData("Text",ev.target.id);

function drop(ev)

var data=ev.dataTransfer.getData("Text");

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

/*draggable="true"z設定元素可拖放 ondragstart="drag(even)規定被拖動資料類型和值如本例是text div1 div2 */

/*ondrop進行放置 ondragover 拖動的資料放置的位置

調用 preventDefault() 來避免浏覽器對資料的預設處理（drop 事件的預設行為是以連結形式打開）

通過 dataTransfer.getData("Text") 方法獲得被拖的資料。該方法将傳回在 setData() 方法中設定為相同類型的任何資料。

被拖資料是被拖元素的 id ("drag1")

把被拖元素追加到放置元素（目标元素）中

</script>

</head>

<body>

<p>拖動 W3CSchool.cc 圖檔到矩形框中:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>/存放拖動的元素/

<br>

</body>

</html>

h5拖放