activeClass and hoverClass not work in jQuery UI Droppable

Question

My drop function fires and everything seems correct but the hoverClass and activeClass does not change the div background.

I've tried this under Chrome, Firefox, and Edge. It has to be something I am missing but I cannot determine what.

CSS:

    <style>
        #main {
            float: left;
        }

        .sub {
            width: 100px;
            height: 100px;
            border: 2px solid black;
            margin: 5px;
        }

        #area1, #area2{
            width: 400px;
            height: 400px;
            border: 3px solid goldenrod;
            margin: 5px 20px;
            float: left;
        }

        .startmoving {
            background: darksalmon;
        }

        .reached {
            background-color: darkorange;
        }
    </style>

Javascript:

$(document).ready(function () {            
            $(".sub").draggable();
            $("#area2").droppable({
                accept: "#_3",
                hoverClass:"reached",
                activeClass: "startmoving",
                tolerance: "touch",
                drop: function () { $(this).css("background", "gray"); }
            });
});

HTML:

<body>
    <div id="main">
        <div class="sub" id="_0" style="background-color: rgb(0, 247, 255);"></div>
        <div class="sub" id="_1" style="background-color: rgb(0, 195, 255);"></div>
        <div class="sub" id="_2" style="background-color: rgb(132, 0, 255);"></div>
        <div class="sub" id="_3" style="background-color: rgb(212, 0, 255);"></div>
    </div>
    <div class="area">
        <div id="area1"></div>
        <div id="area2"></div>
    </div>
</body>

I read this article and I use .ui-droppable.ui-droppable-hover.reached and .ui-droppable-hover.reached and .ui-droppable.reached But no difference

Twisty · Accepted Answer · 2024-10-17 22:00:10Z

Those are legacy, deprecated in version 1.12, in favor of the classes option.

$(function() {
  // activeClass & hoverClass deprecated in Version 1.12, in favor of the classes option
  // https://api.jqueryui.com/droppable/#option-classes
  $(".sub").draggable();
  $("#area2").droppable({
    accept: "#_3",
    classes: {
      "ui-droppable-hover": "reached",
      "ui-droppable-active": "startmoving"
    },
    tolerance: "touch",
    drop: function() {
      $(this).css("background", "gray");
    }
  });
});

#main {
  float: left;
}

.sub {
  width: 100px;
  height: 100px;
  border: 2px solid black;
  margin: 5px;
}

#area1,
#area2 {
  width: 400px;
  height: 400px;
  border: 3px solid goldenrod;
  margin: 5px 20px;
  float: left;
}

.startmoving {
  background: darksalmon;
}

.reached {
  background-color: darkorange;
}

<link rel="stylesheet" href="https://code.jquery.com/ui/1.14.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://code.jquery.com/ui/1.14.0/jquery-ui.js"></script>
<div id="main">
  <div class="sub" id="_0" style="background-color: rgb(0, 247, 255);"></div>
  <div class="sub" id="_1" style="background-color: rgb(0, 195, 255);"></div>
  <div class="sub" id="_2" style="background-color: rgb(132, 0, 255);"></div>
  <div class="sub" id="_3" style="background-color: rgb(212, 0, 255);"></div>
</div>
<div class="area">
  <div id="area1"></div>
  <div id="area2"></div>
</div>

Collectives™ on Stack Overflow

activeClass and hoverClass not work in jQuery UI Droppable

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related