для замены элементов (тоже с именем класса) при перетаскивании и удалении

#javascript #jquery

Вопрос:

Замена двух элементов всякий раз, когда один элемент перетаскивается поверх другого элемента. Я использовал плагин jQuery Вадима, и он работает, но у меня проблема с высотой, шириной, положением и плавающей точкой заменяемых элементов.

Замененные элементы не подходят, если className и его атрибуты были другими. Должен ли я также поменять className или просто поменять местами только определенные атрибуты.

* для лучшего понимания, пожалуйста, проверьте мою демо-версию*

1. @Felix Kling мой вопрос таков: как исправить ширину, высоту, значение с плавающей точкой и положение заменяемых элементов, не уверен ли я, как поменять местами эти атрибуты

Ответ №1:

в вашем примере элементы ведут себя точно так, как они должны вести себя на основе правил css, которые вы применяете к ним. Вы можете добавлять или удалять классы или пересчитывать высоту / ширину с помощью javascript при событии остановки:

 $("#foo").swappable({
    ...
    stop: function(event, ui) {
        alert("drug: "  ui.item[0].id   ", drop: "  event.originalEvent.target.id); 
    }
    ...

});

1. @Vadmik Я только хочу знать, какая функция хранит идентификатор объекта в вашем плагине JS if (dragElement. ID != targetElement. ID) { var current_ID = dragElement. ИДЕНТИФИКАТОР; dargElement. ID = targetElement. ИДЕНТИФИКАТОР; targetElement. ID = current_ID; ИЛИ можно использовать переключатель} }

2. Я отредактировал свой ответ выше. Пожалуйста, взгляните на функцию alert().

Ответ №2:

обычно элементы iu имеют методы, которые могут быть переданы в объекте initilice, в вашем случае вы можете использовать stop остановка вызывается каждый раз, когда завершается обмен

пример:

$(функция() {

  $('.row,.column').swappable({
        items:'.class_1,.class_2',
        cursorAt: {top:-20},
      stop: function(event, ui) { alert("hi") }
          });
 $( '.class_1,.class_2' ).addClass( "ui-widget" );

});

вместо оповещения просто добавьте или удалите нужный вам класс, вероятно, вы можете использовать метод toogle

скажите мне, это то, что вы ищете 8)

1. Привет, спасибо за ваше время и помощь. вместо предупреждения я хочу сравнить dragElement_class и TargetElement_Class, если классы не совпадают, тогда я хочу поменять класс местами с элементами, но не могу получить drag_ID и target_id.