Изменение цвета перетаскивания при падении И в пределах зоны сбрасывания при наведении - PullRequest
Новая
       12

Изменение цвета перетаскивания при падении И в пределах зоны сбрасывания при наведении

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

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

Это то, что у меня есть, это меняет «перетаскивание», когда оно зависает над сбрасываемыми контейнерами, но не меняет цвет при падении. Любая помощь приветствуется! Спасибо! 

<!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'
        });

        $( "#dcontainer1" ).droppable({ 
           over: function() { 
             $("#dragbox").addClass("drop-yellow")
             .removeClass("drop-green"); }, 
           drop: function() { 
             $("#dragbox").addClass("dark-orange")
             .removeClass("dark-purple").find("p"); } 
        });
        $( "#dcontainer1" ).droppable({ 
           over: function() { 
             $("#dragbox").addClass("drop-green")
             .removeClass("drop-yellow"); }, 
           drop: function() { 
             $("#dragbox").addClass("dark-purple")
             .removeClass("dark-orange").find("p"); } 
        }); 
      });
    });
  </script>
</body>
</html>

Ответы [ 2 ]

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

Поскольку у меня нет вашего исходного HTML-кода, я сделал простой пример (просто нажмите кнопку «Выполнить код») ...

он использует сбрасываемые события over и out, чтобы выяснить и добавить классы к помощнику, чтобы знать, какая область отбрасывания закончилась ... остальное - просто CSS для окраски.

Идея состоит в том, что на over мы все знаем, поэтому я добавляю фактически сбрасываемого id к помощнику как к классу, так что стили легко изменить с помощью CSS. 

$(function() {
  $(".draggable").draggable({
      helper: "clone",
      revert: "invalid"
  });
  $( ".droppable" ).droppable({
      drop: function( event, ui ) {
        // dropped
        //console.log('drop');
        $(this).addClass('dropped');
      },
      over: function( event, ui ) {
        // over droppable        
        //console.log('over');
        
        ui.helper
          .addClass("ui-over")
          .addClass($(this).attr('id'));
      },
      out: function( event, ui ) {
        // not over droppable
        //console.log('out');
        
        // reset
        ui.helper
          .removeClass("ui-over")
          .removeClass("container1")
          .removeClass("container2");
      }
    });
});
.content {
  width: 650px;
  text-align: center;
  margin: 30px auto;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  justify-content: space-around;
}


#container1 {
  float: left;
}
#container2 {
  float: right;
}

/* change color if over it */
#container1.ui-droppable-hover {
  background: #38a53a;
}
#container2.ui-droppable-hover {
  background: #fbff23;
}
/* change color if being dragged */
.ui-draggable-dragging {
  background: #8b0000 !important;
}
/* change color depend on droppable area */
.ui-over.container1 {
  background: #ff0 !important;
}
.ui-over.container2 {
  background: #0ff !important;
}
#container1.dropped {
  border: 5px dashed black !important;
}
#container2.dropped {
  border: 5px dashed blue !important;
}


/* your css */
.container {
  width: 150px;
  height: 100px;
  background: #e9559a;
  padding: 13px;
  margin: 0 5px 5px 0;
  border: 5px dashed transparent;
}

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

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

.dark-orange {
  background: #000080
}

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

.drop-yellow {
  background: #fbff23;
}
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  <div class="content">
    
    <div id="container1" class="container droppable">[ C 1 ]</div>
    <div id="container2" class="container droppable">[ C 2 ]</div>

    <ul>
      <li class="draggable bdrag">[ A ]</li>
      <li class="draggable bdrag">[ B ]</li>
      <li class="draggable bdrag">[ C ]</li>
      <li class="draggable bdrag">[ D ]</li>
    </ul>
    
  </div>
0 голосов
/ 02 июля 2018

Похоже, вместо hoverClass вы хотите функциональность событий over и out. Например: 

$("#dcontainer1").droppable({
    over: function() { $("#dragbox").addClass("drop-yellow"); /* remove other classes if needed */ },
    out: function() { $("#dragbox").removeClass("drop-yellow"); }
    // ... other options
});
...