Поменяйте местами имена классов с помощью draggable при сбрасывании при помощи jquery drag and drop

Question

Поменяйте местами имена классов с помощью draggable при сбрасывании при помощи jquery drag and drop

0

У меня есть таблица и использование jquery drag and drop для обмена значениями каждого 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/

В скрипке вы можете увидеть, что число может быть заменено, я хочу, чтобы цвет фона также изменился (путем замены имени класса).

ggbhat 12 апр. 2014, в 19:16

Источник

Теги:

javascript

jquery

html

css

jquery-ui

1 ответ

Ещё вопросы

Kyle Needham · Accepted Answer · 2014-04-12T14-34-00.000Z

В вашей функции 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 здесь.

Я хочу, чтобы имя класса было изменено как на перетаскиваемый, так и на сбрасываемый. Если перетаскиваемый как имя класса «A» и сбрасываемый как имя класса «B», то он должен быть изменен на перетаскиваемое имя класса «B» и выбрасываемое имя класса «A». В моем сценарии мне нужно изменить цвет фона.
@ggbhat Я обновил свой ответ, чтобы показать вам пример того, как это можно сделать.