例子代码如下：
<!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" οndragοver="allowDrop(event)" οndrοp="drop(event)"></div> //ondragover()事件，规定在何处放置被拖动的数据。 ondrop事件：当放//置被拖放数据时发生ondrop事件
<div class="container" οndrοp="drop(event)" οndragοver="allowDrop(event)" >
<img src="network_hll.png" class="content" id="dragger2" draggable="true" οndragstart="drag(event)" /> //ondragstart事件：规定当元素被拖动时，会发生什么
</div>
</body>
</html>
439
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
