(编辑：jimmy 日期: 2024/10/1 浏览：2)
本文实例为大家分享了css3实现图片拖拽效果的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
text-align: center;
}
.container{
display: flex;
justify-content: center;
}
.colorBox{
width: 100px;
height: 100px;
border:1px solid gray;
margin: 0 20px;
}
.showBox{
width: 100px;
height: 100px;
border:5px dashed gray;
margin: 0 auto;
}
.colorBox:nth-child(1){
background-color: orange;
}
.colorBox:nth-child(2){
background-color: skyblue;
}
.colorBox:nth-child(3){
background-color: yellowgreen;
}
img{
border: 1px solid gray;
margin:0 20px;
}
</style>
</head>
<body>
<!--h1{支持拖拽的元素}+img[src='images/lf.jpg']*3+h1{需要开启拖拽的元素}+div.colorBox*3+h1{展示框}+div.showBox-->
<h1>支持拖拽的元素</h1>
<img src="/UploadFiles/2021-04-02/lf.jpg">
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。