【Golang语言社区】h5 实现图片拖拽

时间:2022-05-06
本文章向大家介绍【Golang语言社区】h5 实现图片拖拽，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。
效果图：
<!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>

随机文章
本站知识点必读
最近更新