Функция jQuery 'drop' не вызывается, переопределяется функцией 'over' - PullRequest
Новая
       10

Функция jQuery 'drop' не вызывается, переопределяется функцией 'over'

0 голосов
/ 02 июля 2018

Я перетаскиваю «перетащить» на «container1» и «container2». Когда он отброшен, «drag» становится темно-фиолетовым, если в «container1», или темно-оранжевым, если в «container2». Когда «drag» проходит через «container1», он должен стать зеленым, а когда он проходит через «container2», он должен стать желтым (по сути, «drag» может измениться на 4 разных цвета).

Это то, что у меня есть, это меняет «перетаскивание», когда оно наводится на контейнеры 1 и 2, но оно не меняет цвет, когда его бросают. Кажется, функция 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>
...