Блог

Главная - Вопросы по программированию - Как изменить атрибуты данных в интерфейсе перетаскивания Jquery?

Как изменить атрибуты данных в интерфейсе перетаскивания Jquery?

#javascript #jquery #jquery-ui-sortable

#javascript #jquery #jquery-ui-сортируемый

Вопрос:

Я создал функцию jQuery, в которой пользователь может перетаскивать divs. Но я хочу изменять их атрибуты данных всякий раз, когда пользователи перетаскивают их, например-

 <div data-num="1">one</div>
<div data-num="2">Two</div>
<div data-num="3">Three</div>
<div data-num="4">Four</div>

Всякий раз, когда пользователь перетаскивает div three и помещает его сверху, он должен изменить свой атрибут data data-num="3" на data-num="1" , а div после него должен изменить свой атрибут data на data-num=2 и так далее в соответствии с их положением

Что я пытаюсь

 jQuery( "#app" ).sortable({ 
    update: function(a, b) { 
        parseInt(jQuery(a).attr("data-num"),10) - parseInt(jQuery(b).attr("data-num"),10);
    }          
});

Ответ №1:

Чтобы достичь своей цели, вы можете подключить обработчик событий к stop событию сортируемого объекта. Затем вы можете перебрать каждый дочерний div #app элемент и обновить data-num его, чтобы он соответствовал индексу элемента. Попробуйте это:

 jQuery($ => {
  $("#app").sortable({
    stop: () => {
      $('#app > div').each((i, el) => $(el).data('num', i   1));
    }
  });

  // only for testing...
  $('button').on('click', () => {
    $('#app > div').each((i, el) => console.log(`${el.textContent} - ${$(el).data('num')}`));
  });
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="app">
  <div data-num="1">One</div>
  <div data-num="2">Two</div>
  <div data-num="3">Three</div>
  <div data-num="4">Four</div>
</div>

<button>Test</button>

Комментарии:

1. Спасибо за помощь, он изменяет значения в консоли, но никаких изменений в атрибуте данных вообще нет. jsfiddle.net/rpshagcf

2. Это правильное поведение. jQuery изменяет атрибут данных только в памяти. До тех пор, пока вы всегда используете data() для получения / установки значения (и никогда attr() ) — что является лучшей практикой, тогда код будет работать нормально

Ответ №2:

мы также можем добиться этого, используя индекс элемента

 jQuery("#app").sortable({
   update: function(e, ui) {
       jQuery("#app div").each(function(i, elm) {
           $elm = jQuery(elm);
           var elindex = $elm.index("#app div");
           $elm.attr("data-num", elindex 1);
       });
    }   
});