I'm currently working on a project and could use some assistance. I have divs that are droppable using jQuery UI. While everything is functioning properly and I can drag and drop, I am looking to modify the opacity of the div I am dragging by changing its class or something similar. Below is my jQuery code:
<script>
$(function() {
$( ".recipe-item" ).draggable({helper : 'clone',revert: "valid"});
$( ".cal-date" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Recipe Added!" );
}
});
});
</script>
Here is an excerpt from the HTML:
<div class="recipe-item">
Chicken noodle soup
</div>
<div class="cal-date">
<p>Drop Recipe Here</p>
</div>
And the corresponding CSS:
.recipe-item {
background-color: #043A6b;
width: 200px;
height: 70px;
border-radius: 7px;
border:2px solid #B0B0B0;
color:#fff;
z-index: 10;
margin-top: 10px;
opacity: 1;
text-align: center;
}
.recipe-item-dragged {
opacity: 0.5;
}
.cal-date {
background: #B0B0B0;
width: 200px;
height: 200px;
color:#fff;
}
I am considering either toggling the dragged class or setting the CSS with jQuery. I know you can change the opacity in jQuery using $(item).css("opacity", "0.5");, but I am unsure how to approach it in this case since 'this' in the droppable event refers to the other div, and there are multiple .recipe-items. Any suggestions?