Question

如何

以使拖动山墙元素始终位于其他拖动山墙的顶部页面上的元素
如何在触发鼠标按下事件后立即将元素置于页面上其他可拖动山墙元素的顶部

<html>
    <head>
         <script 
      src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"> 
     </script>

    </head>


       <style>
        body{width: 100%;height:100%;background: 
         url('./BG.jpg');margin:0;overflow: 
          hidden;}
           .bg{width: 100%;height: 100%; position: absolute;}
           #appear_image_div{width: 100%;height: 100%; position: absolute;z- 
           index: 10;opacity: 0.5; background:black;}
           #appear_image{
            -webkit-animation-name: zoom;
            -webkit-animation-duration: 0.6s;
             animation-name: zoom;
             animation-duration: 0.6s;

            display: block; margin:auto;position: relative; z-index: 
            11;top:30px;height: 950px}




            @-webkit-keyframes zoom {
            from {-webkit-transform:scale(0)} 
            to {-webkit-transform:scale(1)}
               }

                        @keyframes zoom {
                        from {transform:scale(0)} 
                        to {transform:scale(1)}
                        }

         #box {
         width: 150px;
         height: 150px;


           top: 0px;
           left: 0px;

          }

         #box1 {
         width: 150px;
         height: 150px;
         background-color: green;

         top: 20px;
         left: 50px;

        }

        #box2 {
        width: 150px;
        height: 150px;
        background-color: yellow;

        top: 50px;
        left: 100px;

       }

      #box4 {
       width: 150px;
       height: 150px;
       background-color: blue;

        top: 70px;
       left: 200px;
         }


       </style>
         <body>
        <div class="bg">

            <img src="./43.jpg"  id="box" >

            <img src="./45-1 copy.jpg"  id="box1" >

            <img src= "./45-2 copy.jpg" id="box2">

        </div>

        <script type="text/javascript" src="./js/CSSPlugin.min.js"> </script>
        <script type="text/javascript" src="js/Draggable.min.js"> </script>
        <script type="text/javascript" src="js/TweenLite.min.js"> </script>

    <!-- this code for first image -->

        <script>

            // this for image one 
            Draggable.create('#box', {
            onClick: function(){
            var img=$(this).attr("src");
            var appear_image="<div id='appear_image_div' 
             onClick='closeImage()'></div>";
            appear_image = appear_image.concat("<img id='appear_image' 
            src='./43.jpg'/>");
            $('body').append(appear_image);
            },
            onDragStart: function(e){
               $('#box').addClass("dragging");
            },
            onDragEnd: function(e){
               e.stopImmediatePropagation();
               e.stopPropagation();
               e.preventDefault();
               $('#box').removeClass("dragging");
           }
       })
       function closeImage(){
        $('#appear_image_div').remove();
        $('#appear_image').remove();
    }

           $(document).on("click", '#box.dragging', function(){
           e.stopPropagation();
           e.preventDefault();
           //return false;
           alert('native click');
           });

          </script>

<!-- this code for second image -->
        <script>
                    // this for image two 
                    Draggable.create('#box1', {
                            onClick: function(){
                            var img=$(this).attr("src");
                            var appear_image="<div id='appear_image_div' 
                           onClick='closeImage()'></div>";
                            appear_image = appear_image.concat("<img 
                              id='appear_image' src='./45-1 
                           copy.jpg'/>");
                            $('body').append(appear_image);
                            },
                            onDragStart: function(e){
                            $('#box1').addClass("dragging");
                            },
                            onDragEnd: function(e){
                            e.stopImmediatePropagation();
                            e.stopPropagation();
                            e.preventDefault();
                            $('#box1').removeClass("dragging");
                        }
                    })
                    function closeImage(){ 
                        $('#appear_image_div').remove();
                        $('#appear_image').remove();
                    }

                        $(document).on("click", '#box1.dragging', 
                       function(){
                        e.stopPropagation();
                        e.preventDefault();
                        //return false;
                        alert('native click');
                        });
                </script>



                <!-- this code for 3rd image -->
        <script>
                // this for image 3 
                Draggable.create('#box2', {
                        onClick: function(){
                        var img=$(this).attr("src");
                        var appear_image="<div id='appear_image_div' 
                        onClick='closeImage()'></div>";
                        appear_image = appear_image.concat("<img 
                         id='appear_image' src='./45-2 copy.jpg'/>");
                        $('body').append(appear_image);
                        },
                        onDragStart: function(e){
                        $('#box2').addClass("dragging");
                        },
                        onDragEnd: function(e){
                        e.stopImmediatePropagation();
                        e.stopPropagation();
                        e.preventDefault();
                        $('#box2').removeClass("dragging");
                    }
                })
                function closeImage(){ 
                    $('#appear_image_div').remove();
                    $('#appear_image').remove();
                }

                    $(document).on("click", '#box2.dragging', function(){
                    e.stopPropagation();
                    e.preventDefault();
                    //return false;
                    alert('native click');
                    });
                  </script>





      </body>
      </html>

如何使山墙元素始终保持在顶部

0 个答案: