jQuery UI更改類

Question

我正在做一個項目，需要一些幫助。 這些div可通過jQuery UI拖放。 一切都很好，我可以拖放，但是我想更改類或其他內容，因此要拖動的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/

Answer 2

您可以嘗試以下方法：

drop: function( event, ui ) {
  ...
  ui.draggable.addClass('recipe-item-dragged');
  //OR
  ui.helper.addClass('recipe-item-dragged');
  ....
}

如果要在開始拖動時更改類：

$( ".recipe-item" ).draggable({
   helper : 'clone',
   revert: "valid",
   drag: function( event, ui ) {
       ui.helper.addClass('recipe-item-dragged');
       //OR
       $(this).addClass('recipe-item-dragged');
   }   

});

來自玻利維亞拉巴斯的歡呼聲

Answer 3

實際上結果非常簡單：

$( ".selector" ).draggable({ opacity: 0.35 });

謝謝大家的幫助！