Question

我将“拖动”拖到“ container1”和“ container2”。拖放后，如果在“ 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>

Answer 1

听起来像y1而不是over和out事件的功能。例如：

y0

Answer 2

由于我没有您的原始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>

更改拖放时的可拖动颜色以及悬停时在可拖放区域内的颜色

2 个答案: