拖放形状和颜色 jquery答案

【问题标题】：Drag and drop shapes and colors jquery拖放形状和颜色 jquery
【发布时间】：2017-02-05 23:31:07
【问题描述】：

我对三角形有疑问，当我拖放三角形时，它不能正确改变颜色，而与其他形状一起使用时效果很好。我找不到三角形形状有什么问题。

这是我的 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%;}

【问题讨论】：

请阅读如何创建minimal reproducible example。

标签： jquery html colors drag-and-drop shape

【解决方案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"
   });
});

【讨论】：