更改拖放时可拖动的颜色和悬停时可拖放区域内的颜色答案

【问题标题】：Change color of draggable on drop AND within droppable zones on hover更改拖放时可拖动的颜色和悬停时可拖放区域内的颜色
【发布时间】：2018-07-02 08:30:43
【问题描述】：

我将“拖动”拖到“container1”和“container2”。当它被放下时，如果在“container1”中，“drag”会变成深紫色，如果在“container2”中，“drag”会变成深橙色。

这就是我所拥有的，当它悬停在可放置容器上时，它会改变“拖动”，但是当它被放置时它不会改变颜色。任何帮助表示赞赏！谢谢！

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

【问题讨论】：

标签： javascript jquery html jquery-ui jquery-ui-draggable

【解决方案1】：

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

【讨论】：

嗨@balexandre！当我们 DROP 可拖动对象时，有没有办法改变它的颜色？它与悬停时的颜色保持相同。我尝试编辑“over”，但它仍然将可拖动对象解释为可放置对象内部，因此它保持不变。也感谢你的动画，它真的很有帮助。
代码已更新，但是对于这样的问题，您似乎真的没有花时间去read the documentation，您会明白drop 事件会在以下时间触发您将可拖动对象放在它的区域...玩转事件和console.log 所有对象，这样您就知道要玩什么...我相信您可以轻松地自己找到答案！跨度>

【解决方案2】：

听起来你想要over 和out 事件的功能而不是hoverClass。例如：

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

【讨论】：

这改变了悬停颜色，但由于某种原因删除了颜色。我做了一些修改，但它仍然不起作用。这不应该照顾我的情况吗： $( "#dcontainer1" ).droppable({ over: function() { $("#dragbox").addClass("drop-green").removeClass("drop-yellow "); }, drop: function() { $("#dragbox").addClass("drop-purple").removeClass("drop-orange").find("p"); } });跨度>
我认为不需要滴色？我认为我不太了解要求。无论如何，这就是如何获得您所描述的功能，剩下的应该只是选择正确的样式来应用/删除的问题。如果您需要进一步的帮助，您可以编辑问题而不是评论吗？使用 Markdown 会更好地格式化
注意！我刚刚用我一直在尝试并需要帮助的代码更新了代码。谢谢