Javascript 更改悬停时可拖放区和可拖放区内的颜色_Javascript_Jquery_Html_Jquery Ui_Jquery Ui Draggable

Javascript 更改悬停时可拖放区和可拖放区内的颜色

javascript jquery html jquery-ui

Javascript 更改悬停时可拖放区和可拖放区内的颜色,javascript,jquery,html,jquery-ui,jquery-ui-draggable,Javascript,Jquery,Html,Jquery Ui,Jquery Ui Draggable,我正在将“拖动”拖动到“container1”和“container2”。拖放时，“拖动”在“container1”中变为深紫色，在“container2”中变为深橙色这就是我所拥有的，当它悬停在可拖放容器上时，它会改变“拖动”，但当它被拖放时，它不会改变颜色。感谢您的帮助！谢谢大家! <!DOCTYPE html> <html> <head> <style type="text/css"> .container { wi

我正在将“拖动”拖动到“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>


.集装箱{
宽度：50px；
高度：50px；
背景#e9559a；
填充：13px；
边距：0 5px 5px 0；
}
B.布拉格先生{
高度：100px；
宽度：100px；
背景：灰色；
填充物：5px；
}
.深紫色{
背景：#8万；
}
.深橙色{
背景：#000080
}
.放弃绿色{
背景#38a53a；
}
.滴黄色{
背景:#fbff23；
}
牵引箱
我可以来这里吗
我可以来这里吗
$（文档）.ready（函数（）{
$（函数（）{
$（“#拖动容器”）。可拖动({
还原：功能（事件、用户界面）{
$（此）.data（“UIDRAGABLE”）。原始位置={
排名：0，
左：0
};
返回！事件；
}
});
$（“#数据容器1”）。可拖放({
接受：“#dragbox”
});
$（“#数据容器2”）。可拖放({
接受：“#dragbox”
});
$（“#dcontainer1”）。可拖放（{
over:function（）{
$（“#dragbox”）.addClass（“下拉黄色”）
.removeClass（“绿色下降”）；}，
drop:function（）{
$（“#dragbox”）.addClass（“深橙色”）
.removeClass（“深紫色”）.find（“p”）；}
});
$（“#dcontainer1”）。可拖放（{
over:function（）{
$（“#dragbox”）.addClass（“绿色下降”）
.removeClass（“滴黄”）；}，
drop:function（）{
$（“#dragbox”）.addClass（“深紫色”）
.removeClass（“深橙色”）.find（“p”）；}
}); 
});
});

听起来像是想要和事件的功能，而不是

hoverClass

。例如：

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

由于我没有您的原始HTML代码，所以我制作了一个简单的示例（只需单击“运行代码”按钮）

它使用droppable events

over

和

out

来找出并向助手添加类，这样就可以知道什么是droppable area over。。。其余的只是用于着色的CSS

这个想法是，在

over

上，我们确实知道一切，所以我将实际可拖放的
id
作为一个类附加到帮助器上，这样就很容易通过CSS修改样式

$（函数（）{ $（“.draggable”）.draggable({ 助手：“克隆”，回复：“无效” }); $（“.droppable”）.droppable({ drop：函数（事件、用户界面）{ //下降 //console.log（'drop'）； $（this.addClass（'dropled'）； }, 结束：功能（事件、用户界面）{ //超可降 //console.log（'over'）； ui.helper .addClass（“ui结束”） .addClass（$（this.attr（'id'））； }, 输出：功能（事件、用户界面）{ //不可过度下降 //console.log（'out'）； //重置 ui.helper .removeClass（“用户界面结束”） .removeClass（“容器1”） .removeClass（“集装箱2”）； } }); }); .content{ 宽度：650px；文本对齐：居中；保证金：30像素自动； } 保险商实验室{ 填充：0；保证金：0；列表样式：无；显示器：flex；证明内容：周围的空间； } #集装箱1{ 浮动：左； } #集装箱2{ 浮动：对； } /*如果超过它，请改变颜色*/ #container1.ui-droppable-hover{ 背景#38a53a； } #container2.ui-droppable-hover{ 背景:#fbff23； } /*如果被拖动，请更改颜色*/ .ui可拖动的拖动{ 背景：#8万！重要； } /*根据可拖放区域更改颜色*/ .ui-over.container1{ 背景：#ff0！重要； } .ui-over.container2{ 背景：#0ff！重要； } #容器1.5{ 边框：5px黑色虚线！重要； } #容器2.5{ 边框：5px蓝色虚线！重要； } /*你的css*/ .集装箱{ 宽度：150px；高度：100px；背景#e9559a；填充：13px；边距：0 5px 5px 0；边框：5px透明虚线； } B.布拉格先生{ 高度：50px；宽度：50px；背景：灰色；填充物：5px； } .深紫色{ 背景：#8万； } .深橙色{ 背景：#000080 } .放弃绿色{ 背景#38a53a； } .滴黄色{ 背景:#fbff23； } [C 1] [C 2] [A] [B] [C] [D] 这会更改悬停颜色，但由于某些原因会删除放置颜色。我做了一些修改，但仍然不起作用。这不应该解决我的问题吗：$（“#dcontainer1”）.dropable（{over:function（）{$（“#dragbox”）.addClass（“drop green”）.removeClass（“drop yellow”）；}，drop:function（）{$（“#dragbox”）.addClass（“drop purple”）.removeClass（“drop orange orange”）.find（“p”）}）；我觉得不需要一滴颜色？我想我不太明白这些要求。在任何情况下，这就是如何获得您描述的功能，其余的应该只是选择正确的样式来应用/删除。如果你需要进一步的帮助，你能编辑问题而不是评论吗？你会得到更好的格式与markdownNoted！我刚刚用我一直在尝试的东西更新了代码，需要帮助。谢谢@balexandre！当我们放下拖网时，有没有办法改变它的颜色？它保持不变