使用 sortable() 时对字符串进行排序

Question

我有一个看起来像这样的字符串：

[TITLE|prefix=test][DYNAMIC|limit=777|random=1][STORENAME]

所以 [TITLE]、[DYNAMIC] 和 [STORENAME] 是标签，我想使用 sortable() 对它们进行排序，它来自 jQuery UI.

这是我目前尝试过的方法：

let tags = '[TITLE|prefix=test][DYNAMIC|limit=777|random=1][STORENAME]';

$(".sort-me").sortable({
  connectWith: ".connectedSortable",
  cursor: "grabbing",
  opacity: 0.7,
  beforeStop: function(event, ui) {
    // Check the position of the dragged item
    $('.mt-box').each(function(key, value) {
      if (ui.item.index() === key && value.className === ui.item[0].className && $(ui.item[0]).find('.form-check-input')[0].checked) {
        const sortTags = () => {
          const querySplits = tags.split(']');
          let selectedTag = '';
          querySplits.forEach((queryValue, queryKey) => {
            if (queryValue.includes($(ui.item[0]).attr('data-mt-field').toUpperCase())) {
              selectedTag = queryValue + ']';
              querySplits[queryKey] = '';
            }
            if (querySplits[queryKey].length > 0 && querySplits[queryKey].slice(-1) !== ']') {
              querySplits[queryKey] += ']';
            }
          });
          querySplits.splice(ui.item.index(), 0, selectedTag);
          tags = querySplits.filter((el) => el).join(']').replace(/[\]]]+/, ']');
          console.log(tags);
        }

        sortTags();

      }
    });
  }
});

如果您首先设置任何项目，则排序工作正常。但是如果你移动其他的东西，比如第一个项目移到第二个或第三个位置，排序就会不正确。

请在 JSFIDDLE 上查看我的代码，并在移动项目时查看控制台。

Answer 1

问题是在循环中我一直将值设置为空字符串。然后当使用 splice() 时，值可能会被放置在正确的位置，但结果看起来不正确，因为数组包含空值。所以在那种情况下，我使用 querySplits.filter((v) => v != ''); 从数组中删除所有为空的元素。

另一个错误是我一直在使用 ui.item.index() 作为 splice() 的第一个参数，但它应该是 key.

查看完整代码：

let tags = '[TITLE|prefix=test][DYNAMIC|limit=777|random=1][STORENAME]';

$(".sort-me").sortable({
  connectWith: ".connectedSortable",
  cursor: "grabbing",
  opacity: 0.7,
  beforeStop: function(event, ui) {
    // Check the position of the dragged item
    $('.mt-box').each(function(key, value) {    
      if (value.className === ui.item[0].className && $(ui.item[0]).find('.form-check-input')[0].checked) {
        const sortTags = () => {
          let querySplits = tags.split(']');
          let selectedTag = '';
          querySplits.forEach((queryValue, queryKey) => {
            // Check if the query includes the tag
            if (queryValue.includes($(ui.item[0]).attr('data-mt-field').toUpperCase())) {
                // If match. store the value in a variable and prepend ], since we have used split(']')
              selectedTag = queryValue + ']';
              // Delte the value of that tag from the array
              querySplits[queryKey] = '';
            }
            // Add ], if it's missing in a valid value
            if (querySplits[queryKey].length > 0 && querySplits[queryKey].slice(-1) !== ']') {
              querySplits[queryKey] += ']';
            }
          });
          querySplits = querySplits.filter((v) => v != '');
          querySplits.splice(key, 0, selectedTag);
          tags = querySplits.filter((el) => el).join(']').replace(/[\]]]+/, ']');
          console.log(tags);          
        }

        sortTags();

      }
    });
  }
});

使用 sortable() 时对字符串进行排序

Sort the string when using sortable()

javascript

jquery-ui