javascript - jQuery 'drop' 函数未被调用，被 'over' 函数覆盖

问题描述

我正在拖动dragtocontainer1和container2。

掉落时，如果在中，drag则变为深紫色，如果在中，则变为container1深橙色container2。

通过drag时container1应该变成绿色，通过container2时应该变成黄色（基本上drag可以变成4种不同的颜色）。

这就是我所拥有的，drag当它悬停在container1和时会发生变化container2，但是当它被放下时它不会改变颜色。

处理悬停的函数似乎over覆盖了我定义的drop函数。

有谁知道发生了什么？

    <!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>

标签： javascriptjqueryhtmljquery-uijquery-ui-draggable

javascript - jQuery 'drop' 函数未被调用，被 'over' 函数覆盖

问题描述

解决方案

推荐阅读