Question

当我拖动时，我遇到了三角形的问题。掉落三角形它不会正确改变颜色，并且与其他形状一起使用效果很好。我找不到triangl形状有什么问题。

这是我的HTML代码：

<!doctype html>
      <link rel="stylesheet" type="text/css" href="figur.css">
      <title>Spel för barn</title>
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

     <script>
         $(function() {
            $( "#rektangel" ).draggable();
            $( "#fyrkant" ).draggable();

            $( "#rektangelbox" ).droppable({
               accept: "#rektangel",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Bra!" );
               }
            });

            $( "#fyrkantbox" ).droppable({
               accept: "#fyrkant",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Bra!" );
               }
            });

            $( "#cirkel" ).draggable({scope : "cirkel"});
            $( "#triangel" ).draggable({scope : "triangel"});

            $( "#cirkelbox" ).droppable({
               scope: "cirkel",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Bra!" );
               }
            });

            $( "#triangelbox" ).droppable({
               scope: "triangel",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Bra!" );
               }
            }); 
         });
      </script>
      <script>
      $(document).ready(function(e) {
        $("#triangel, #fyrkant, #cirkel, #rektangel").draggable();
        $("#triangelbox, #fyrkantbox, #cirkelbox, #rektangelbox").droppable({
            greedy: true,
            drop: function()
            {
                $(this).css("background-color", "#07f507"); 
                $(this).html("Bra!")
            },
            tolerance: "pointer",
            hoverClass: "dark"
        });
    });
    </script>

      <script>
      $(document).ready(function(e) {
        $("#triangel").draggable();
        $("#triangelbox").droppable({
            greedy: true,
            drop: function()
            {
                $(this).css("background-color", "#07f507"); 
                $(this).html("Bra!")
            },
            tolerance: "pointer",
            hoverClass: "dark"
        });
    });
    </script>

      <script>
      $( function() {
        $( "#fyrkant, #cirkel, #rektangel, #triangel" ).draggable({ revert: "valid" });
        $( "#fyrkant, #cirkel, #rektangel, #triangel" ).draggable({ revert: "invalid" });

        $( "" ).droppable({
          classes: {
            "ui-droppable-active": "ui-state-active",
            "ui-droppable-hover": "ui-state-hover"
          },
          drop: function( event, ui ) {
            $( this )
              .addClass( "ui-state-highlight" )
              .find( "p" )
                .html( "" );
          }
        });
      } );
      </script>
      <script>
        $( "li" ).hover(
          function() {
            $( this ).append( $( "<span> ***</span>" ) );
          }, function() {
            $( this ).find( "span:last" ).remove();
          }
        );

        $( "li.fade" ).hover(function() {
          $( this ).fadeOut( 100 );
          $( this ).fadeIn( 500 );
        });
</script>

      <button onclick="myFunction()"><b>Starta om spelet här!</b></button>

        <script>
        function myFunction() {
            location.reload();
        }
        </script>

   <body>
        <center>
            <div class = "containerpratbubbla">
                    <div class="bubble">
                      Hej där! <br> Vill du lära dig geometriska figurer? Då har du kommit till rätt plats! Här får du nämligen lära dig hur olika figurer ser ut, och du kommer också få chansen att spela ett spel! 
                    </div>

                    <div class="bubble1">
                      Hej där! <br> Jag ska lära dig hur spelet går till! Du ska dra de små svarta figurerna till de större vita, och para ihop rätt figur, till exempel triangel med triangel. Svårare än så är det inte! Lycka till!
                    </div>
                <br><br>
            </div>
        </center>

            <img src = "http://www.pngall.com/wp-content/uploads/2016/06/Cartoon-PNG-HD.png" style = "display: block; margin: 0 auto;">
            <br><br>

        <center>
          <div class = "container1">

             <div id = "rektangel" class = "ui-widget-content">
                <p></p>
             </div>

             <div id = "fyrkant" class = "ui-widget-content">
                <p></p>
             </div>

             <div id = "cirkel" class = "ui-widget-content">
                <p></p>
             </div>

             <div id = "triangel" class = "ui-widget-content">
                <p></p>
             </div>

           </div>
        </center>

      </div>
      <br><br><br>
        <center> 
              <div class = "container" >

                <div id="rektangelbox" class = "ui-widget-header">
                    <p></p>
                </div>

                <div id="fyrkantbox" class = "ui-widget-header">
                <p></p>
                </div>

                 <div id="cirkelbox" class = "ui-widget-header">
                    <p></p>
                 </div>

                 <div id="triangelbox" class = "ui-widget-header">
                    <div class="text_inside">
                        <p>Bra!</p>
                    </div>
                 </div>

              </div>
        </center>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
   </body>
</html>
    </center>

这是我的CSS代码：

body {
    text-align: center;
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 30px;
    margin-bottom: 30px;
    background-color: #ffa600;
}

.container, .containerpratbubbla {
    display: table-row-group;
    margin: 0 auto;
}

.containerpratbubbla {
    margin: 0 auto
}

.container1 {
    display: table-row-group;
    margin: 0 auto;
}

#cirkel {
    height: 50px;
    width: 50px;
    background-color: black;
    border-radius: 90px;
    margin-bottom: 30px;
    float: left;
    margin: 10px;
    padding: 0.5em; 
}

#cirkelbox {
    height: 200px;
    width: 200px;
    border-radius: 100px;
    margin-bottom: 30px;
    float: left;
    margin: 10px;
    padding: 0.5em; 
    background-color: white;
}

#triangel {
    width: 0;
    height: 0;
    border-left: 3em solid transparent;
    border-right: 3em solid transparent;
    border-bottom: 4.8em solid black;
    float: left;
}

#triangelbox {
    width: 0;
    height: 0;
    border-left: 10em solid transparent;
    border-right: 10em solid transparent;
    border-bottom: 14em solid white;
    float: left;
}

.text_inside {
    padding-top: 1em;
    margin-left: -0.7em
}

#rektangel {
    width: 150px; 
    height: 50px; 
    padding: 0.5em; 
    float: left;
    margin: 0px 5px 10px 0; 
    margin: 10px;
    background-color: black;
}

#fyrkant {
    width: 50px; 
    height: 50px; 
    padding: 0.5em; 
    float: left;
    margin: 0px 5px 10px 0; 
    margin: 10px;
    background-color: black;
}

#fyrkantbox { 
    width: 200px; 
    height: 200px;
    padding: 0.5em; 
    float: left; 
    margin: 10px;  
    background-color: white;
}

#rektangelbox { 
    width: 300px; 
    height: 200px;
    padding: 0.5em; 
    float: left; 
    margin: 10px;  
    background-color: white;
}

.bubble 
    {
    position: relative;
    display: inline-block;
    max-width: 350px;
    min-height: 2em;
    padding: 20px;
    background: #FFFFFF;
    border: black solid 4px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 40px;
    margin: 10px
    }

.bubble:after 
    {
    content: "";
    position: absolute;
    bottom: -15px;
    left: 70%;
    border-style: solid;
    border-width: 15px 15px 0;
    border-color: #FFFFFF transparent;
    display: block;
    width: 0;
    z-index: 1; 
    }

.bubble:before 
    {
    content: "";
    position: absolute;
    bottom: -19.5px;
    left: calc(70% - 3px) ;
    border-style: solid;
    border-width: 18px 18px 0;
    border-color: black transparent;
    display: block;
    width: 0;
    z-index: 0;
    }

.bubble1 
    {
    position: relative;
    display: inline-block;
    max-width: 350px;
    min-height: 2em;
    padding: 20px;
    background: #FFFFFF;
    border: black solid 4px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 40px;
    margin: 10px;
    }

.bubble1:after 
    {
    content: "";
    position: absolute;
    bottom: -15px;
    left: 20%;
    border-style: solid;
    border-width: 15px 15px 0;
    border-color: #FFFFFF transparent;
    display: block;
    width: 0;
    z-index: 1;
    }

.bubble1:before 
    {
    content: "";
    position: absolute;
    bottom: -19.5px;
    left: calc(20% - 3px) ;
    border-style: solid;
    border-width: 18px 18px 0;
    border-color: black transparent;
    display: block;
    width: 0;
    z-index: 0;
    }

. dark {
    background-color: red !important;   
}

 @media only screen and (max-width: 695px){
    img { width: 500px; height: 500px}
}

 @media only screen and (max-width: 550px){
    img { width: 330px; height: 330px}
}

 @media only screen and (max-width: 1200px){
    #fyrkantbox { width: 150px; height: 150px }
}

 @media only screen and (max-width: 1200px){
    #rektangelbox { width: 250px; height: 150px; }
}

 @media only screen and (max-width: 1200px){
    #triangelbox { border-left: 6.5em solid transparent; 
                   border-right: 6.5em solid transparent;   
                   border-bottom: 11em solid white; }
}

 @media only screen and (max-width: 1200px){
    #cirkelbox { width: 150px; height: 150px }



 @media only screen and (max-width: 930px){
    #fyrkantbox { width: 100px; height: 100px }
}

 @media only screen and (max-width: 930px){
    #rektangelbox { width: 200px; height: 100px; }
}

 @media only screen and (max-width: 930px){
    #triangelbox { border-left: 5em solid transparent; 
                   border-right: 5em solid transparent;     
                   border-bottom: 7.8em solid white; }
}

 @media only screen and (max-width: 930px){
    #cirkelbox { width: 100px; height: 100px }


 @media only screen and (max-width: 730px){
    #fyrkantbox, #cirkelbox, #rektangelbox, #triangelbox { margin: 4.3%;}

Answer 1

欢迎来到SO论坛。请下次尝试只提供与您的具体问题相关的代码。如果您粘贴整个代码，将难以阅读，因此找到问题非常棘手。

您的代码问题是由于您在三角形中应用颜色的方式。所有形状都是常规divs，背景颜色除了三角形外，最后一个形状是使用带颜色的边框形成的。因此，您需要更改代码以使用带有三角形的border-color：

$(document).ready(function (e) {
   $("#triangel").draggable();
   $("#triangelbox").droppable({
       greedy: true,
       drop: function()
       {
           //---Use a border color instead a background color
           $(this).css("border-bottom-color", "#07f507"); 
           $(this).html("Bra!")
       },
       tolerance: "pointer",
       hoverClass: "dark"
   });
});

拖放形状和颜色jquery

1 个答案: