1

I am dragging the drag to container1 and container2.

When it is dropped, drag either turns dark purple if in container1 or dark orange if in container2.

When drag is passing through container1, it should turn green, and when it is passing through container2, it should turn yellow (essentially drag can change to 4 different colors).

This is what I have, this changes drag when it hovers over container1 and container2, but it does not change color when it is dropped.

It seems the over function, which handles the hovering, overrides whatever I define my drop function to be.

Does anyone know what is going on?

    <!DOCTYPE html>
    <html>
    <head>
      <style type="text/css">
        .container {
          width: 50px;
          height: 50px;
          background: #e9559a;
          padding: 13px;
          margin: 0 5px 5px 0;
        }

        .bdrag {
          height: 100px;
          width: 100px;
          background: grey;
          padding: 5px;
        }

        .dark-purple {
          background: #8b0000;
        }

        .dark-orange {
          background: #000080
        }

        .drop-green {
          background: #38a53a;
        }

        .drop-yellow {
          background: #fbff23;
        }
      </style>
    </head>
    <body>
      <div class="container">
        <div class="row">
          <div class="col-12">
            <div class="shape-container">
              <div id="origin-container" class="container">
                <div id="dragbox" class="bdrag text-dark">
                  <p>Draggable Box</p>
                </div>
              </div>
              <div id="dcontainer2" class="container">
                <p>Can drop in here #1</p>
              </div>
              <div id="dcontainer1" class="container">
                <p>Can drop in here #2</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <script>
        $(document).ready(function() {
          $(function() {
            $("#drag-container").draggable({
              revert: function(event, ui) {
                $(this).data("uiDraggable").originalPosition = {
                  top: 0,
                  left: 0
                };
                return !event;
              }
            });

            $("#dcontainer1").droppable({
              accept: '#dragbox'
            });

            $("#dcontainer2").droppable({
              accept: '#dragbox'
            });

            $( "#dcontainer2" ).droppable({ 
               over: function() { $("#dragbox").addClass("drop-yellow").removeClass("drop-green"); }, 
<!-- THE FOLLOWING LINE DOES NOT RUN: --!> 
                drop: function() { $("#dragbox").addClass("drop-orange").removeClass("drop-purple").find("p"); } 
            });

            $( "#dcontainer1" ).droppable({ 
               over: function() { $("#dragbox").addClass("drop-green").removeClass("drop-yellow"); }, 
<!-- THE FOLLOWING LINE DOES NOT RUN: --!> 
                drop: function() { $("#dragbox").addClass("drop-purple").removeClass("drop-orange").find("p"); } 
            });

          });
        });
      </script>
    </body>
    </html>
Djensen
  • 1,337
  • 1
  • 22
  • 32
fibonaccilinguine
  • 101
  • 1
  • 2
  • 11
  • This is actually a css problem, not a jquery one, [details here.](https://stackoverflow.com/questions/4805075/how-to-override-background-image-defined-in-css-with-another-css) You're adding both classes at the same time, so you end up with the second background style overriding the first. You'll either need to `.removeClass("drop-orange drop-green drop-yellow")` or just use `.attr("class", "drop-purple")` to replace the whole property – blgt Jul 04 '18 at 10:47
  • No probs, you should self-post an answer with a short description and tick it – blgt Jul 07 '18 at 18:39

0 Answers0