2013年6月10日 星期一
6/5 (圖片拖拉)
<%@ page language="java" contentType="text/html; charset=BIG5"
pageEncoding="BIG5"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<title>Insert title here</title>
<style type="text/css">
#box {
padding-left: 150px;
width: 400;
}
#dropzone1 {
background: #ffffff;
color: #d90b0b;
margin-left: 50px;
padding-left: 50px;
height: 200px;
width: 200px;
border: dashed #40464d 3px;
float: left;
font-weight: bold;
border: dashed #40464d 3px;
}
#dropzone2 {
background: #ffffff;
color: #d90b0b;
margin-left: 50px;
padding-left: 50px;
height: 200px;
width: 200px;
border: dashed #40464d 3px;
float: left;
font-weight: bold
}
</style>
</head>
<script>
function dragStart(ev) {
ev.dataTransfer.effectAllowed = 'copy';
ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
return true;
}
function dragEnter(ev) {
ev.preventDefault();
return true;
}
function dragOver(ev) {
return false;
}
function dragDrop(ev) {
var eleid = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(eleid));
ev.preventDefault();
}
</script>
<body>
4990E102 魏崇訓 4990E066楊欣翰
<div id="box">
<img id="box1" src="flower1.jpg" ondragStart="return dragStart(event)"
ondragend="return dragEnd(event)" />
<img id="box2" src="flower2.jpg" ondragStart="return dragStart(event)"
ondragend="return dragEnd(event)" />
</div>
<br />
<div id="dropzone1" ondragenter="return dragEnter(event)"
ondragover="return dragOver(event)" ondrop="return dragDrop(event)">
<p>豬籠草</p>
</div>
<div id="dropzone2" ondragenter="return dragEnter(event)"
ondragover="return dragOver(event)" ondrop="return dragDrop(event)">
<p>太陽花</p>
</div>
</body>
</html>
訂閱：
張貼留言 (Atom)
沒有留言:
張貼留言