Greetings, after being a long-time reader, I have finally decided to post for the first time. In the process of creating a webpage with jQuery drag and drop divs, I am curious about how to change the class of a child div within a draggable div once it is dropped onto a "droppable" div. Here's an overview of the HTML structure:
<div class="dropbox"></div>
The related jQuery script looks like this:
<script type='text/javascript'>//<![CDATA[
$(function(){
$("#draggable").draggable({
drag: function(event, ui) {
$(this).removeClass('dropClass');
}
});
Later in the script, the droppable section is implemented as follows:
$(".dropbox").droppable({
tolerance: 'intersect',
over: function(event, ui) {
$('.ui-draggable-dragging').addClass('hoverClass');
},
out: function(event, ui) {
$('.ui-draggable-dragging').removeClass('hoverClass');
},
drop: function(event, ui) {
$('.ui-draggable-dragging').removeClass('hoverClass').addClass('dropClass');
}
});
If a child div of the draggable element has a class named "indicator," is there a way to modify the drop event function to also include the following code?
$('.indicator').removeClass('hoverClass').addClass('setOn');
I understand that the initial section creates the class for "draggable," which then becomes part of "ui-draggable-dragging." Is there a method to trigger another class like "indicator" without using an additional event when executing the drop function?
I hope this explanation is clear, as I have not found a solution to this issue elsewhere.