【Golang语言社区】h5 实现图片拖拽
【Golang语言社区】h5 实现图片拖拽
李海彬
发布于 2018-03-27 10:07:24
发布于 2018-03-27 10:07:24
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>DragDrop</title>
<style type="text/css">
body {
margin:60px;
background:#fff;
position:relative;
}
#logo{
width:300px;
height:200px;
background:url(logo-mask.png) center 50% no-repeat;
position:absolute;
left:0;
}
#box{
width:300px;
height:200px;
background:#d4efdf;
border-radius:10px;
border:5px dashed #27AE60;
position:absolute;
right:0;
}
</style>
</head>
<body>
<div id="logo"></div>
<div id="box"></div>
<script type="text/javascript">
var logo = document.getElementById("logo");
var box = document.getElementById("box");
logo.draggable = true;
box.ondragover = function(ev){
ev.preventDefault();
}
box.ondrop = function(ev){
box.appendChild(logo);
}
var person = {
age: 31,
gender: "male",
address:{
city:"shanghai",
zipcode:"200000"
}
}
</script>
</body>
</html>
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2017-05-16，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读