javascript - 使用 jquery 拖放交换 draggable 的类名和 droppable on drop

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/

在 fiddle 中你可以看到数字可以交换，我希望背景颜色也改变(通过交换类名)。

Answer 1

在您的 drop 函数中，您可以像这样交换类属性:

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();
}

查看更新的 Fiddle here .