js实现拖动方块到另一个目标上变化效果代码-html代码-BFW代码库

js实现拖动方块到另一个目标上变化效果代码

代码语言：html

所属分类：拖放

代码描述：js实现拖动方块到另一个目标上变化效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html>

<head>
    <style>
        container{position: relative;}
        .rectangle-1{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #4CAF50; width: 180px; height: 150px; border-radius: 5px; transition: 0.3s all ease; color: #fff; text-align: center; line-height: 150px; font-size: 25px;}
        .rectangle-1.collide{background: #EF5350;}
        .rectangle-1:after{content:":-)"; position: absolute; bottom: -50px; left: 50%; transform: translateX(-50%);}
        .rectangle-1.collide:after{content:":-("; }
        .rectangle-2{position: absolute; background: #F5B041; width: 100px; height: 100px; border-radius: 5px; z-index: 10; cursor: move; transition: 0.5s box-shadow ease, 0.5s transform ease; transform: translate(0, 0); top: 40%; left: 30%; text-align: center; line-height: 100px; font-size: 17px;}
        .rectangle-2.onDrag{box-shadow: 5px 5px 25px 0px rgba(0,0,0,0.2); transform: translate(-3px, -3px);}
        
        html, body{
          user-select: none;
          width: 100%; 
          height: 100%; 
          font-family: 'Roboto', sans-serif;
        }
        body{
          margin: 0;
          background-color: #1F1F1F;
        }
        
        
        @media only screen and (max-width: 1200px) {
          .projHeader{position: static; transform: translate(0);}
        .primaryText{font-weight: 300; font-size: 30px;text-align: center; margin-top: 10px;}
        .secondaryText{font-weight: 300; text-align: center; font-size: 20px;}
          .createdBy{font-weight: 300; text-align: center; font-size: 17px; margin-top :5px;}
        .createdBy a{color: #000; text-decoration: none; border-bottom: 1px solid #000;}
    </style>

</head>

<body>
   <div class="container">
  <div class="rectangle-1" id="rect">Hover Me </div>
  <div class="rectangle-2" id="dragMe">Drag Me</div>
</div>

    <script>
        var dragMe;
        window.onload=function(){
          var rect = document.getElementById("rect");
          dragMe = document.getElementById("dragMe");
          
          initDrag({
            element: dragMe,
            start: function(){addShadow();},
            drag: function(){isCollapsed(dragMe, rect);},
            stop: f.........完整代码请登录后点击上方下载按钮下载查看