您的位置：首页 > Web前端 > HTML5

一个简单的html5来回拖放的例子w3c

2013-11-18 16:54 399 查看

例子代码如下：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>拖放</title>

<style type="text/css">

.container {

border: 1px solid #CCC; width:324px; height:324px;

float:left;

}

.content {

background-color: #FAA;

width:324px; height:324px;

float:left;

}

</style>

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script type="text/javascript">

function allowDrop(evt){

evt.preventDefault(); //允许放下函数，需要阻止事件默认动作，因为drop默认会打开新链接。

}

function drag(evt){

evt.dataTransfer.setData("Text",evt.target.id); //拖动函数，设置被拖动数据的数据类型和值。

}

function drop(evt){ //放下函数

evt.preventDefault(); //阻止事件的默认动作

var data=evt.dataTransfer.getData("Text"); //获得被拖动的数据。

evt.target.appendChild(document.getElementById(data)); // 把被拖动数据追加到目标数据中

}

</script>

</head>

<body>

<div class="container" id="dragger1" ondragover="allowDrop(event)" ondrop="drop(event)"></div> //ondragover()事件，规定在何处放置被拖动的数据。 ondrop事件：当放//置被拖放数据时发生ondrop事件

<div class="container" ondrop="drop(event)" ondragover="allowDrop(event)" >

<img src="network_hll.png" class="content" id="dragger2" draggable="true" ondragstart="drag(event)" /> //ondragstart事件：规定当元素被拖动时，会发生什么

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航