使用jquery拖放在拖放時將dropgable的類名交換為droppable

Question

我有表，並使用jquery拖放與彼此交換每個td的值。 我使用以下方法做到了：

        $("#a tr td").draggable({
            appendTo: "body",
            helper: 'clone',
            cursor: "move",
            revert: "invalid"
        });


        $('#a tr td').droppable({
           accept: function(ui, item) {
           if($(this).html().trim().length != 0)
              return false;
       },

           drop:function (event, ui ) {
             $(this).append(ui.draggable.text());
             var draggableId = ui.draggable.attr("class");
             var droppableId = $(this).attr("class");
         $( "ui.draggable" ).switchClass( "draggableId", " droppableId");
        //$(this).switchClass( "droppableId", "draggableId");
             $(ui.draggable).empty();

       }
       });  `

但是從上面我只能交換與td相關聯的值，但是我希望與TD元素相關聯的類名稱更改。 我嘗試了switchClass但沒有運氣。 請建議我達到此目的的方法。

演示： http : //jsfiddle.net/ggbhat/BLJFp/3/

在小提琴中，您可以看到數字可以交換，我希望背景顏色也可以更改（通過交換類名）。

Answer 1

在您的放置函數中，您可以像這樣交換類屬性：

drop: function (event, ui)
{
    var draggable      = $(ui.draggable)
      , droppable      = $(this)
      , draggableClass = draggable.attr('class')
      , droppableClass = droppable.attr('class');

    droppable.append(draggable.text());
    draggable.attr('class', droppableClass);
    droppable.attr('class', draggableClass);
    draggable.empty();
}

在此處查看更新的小提琴 。