js css3实现图片拖拽效果

(编辑：jimmy 日期: 2025/7/3 浏览：3 次 )

本文实例为大家分享了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">


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：浅谈javascript的url参数parse和build函数
下一篇：jQuery插件echarts实现的单折线图效果示例【附demo源码下载】