javascript - jquery UI 改变类

Question

我正在做一个元素，需要一些帮助。拥有可通过 jQuery UI 删除的这些 div。一切都很好，我可以拖放，但我想更改类或其他东西，所以我拖动的 div 具有一定的不透明度。这是我的 jquery:

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

这是一些 html:

<div class="recipe-item">
    Chicken noodle soup
</div>
<div class="cal-date">
<p>Drop Recipe Here</p>
</div>

和 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;
}

所以我可以切换拖动的类或使用 jQuery 设置 css。我知道在 jQuery 中你可以做 $(item).css("opacity", "0.5"); 或按照这些行，但我不确定在这种情况下我会怎么做，因为 ' droppable 事件中的 this' 是另一个 div，我会有多个 .recipe-items。有什么想法吗？

Answer 1

.toggleClass(".recipe-item-dragged", true);

http://api.jquery.com/toggleclass/