SortableJS功能强大的JS拖拽库（实现标签页拖拽）

SortableJS引入

1、npm

$ npm install sortablejs --save

2、CDN

<!-- jsDelivr :: Sortable :: Latest (https://www.jsdelivr.com/package/npm/sortablejs) -->
  <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.8.3/Sortable.min.js"></script>

实现标签页的拖拽功能：

演示效果：

点击标签切换颜色（排他功能）

  var tags=document.getElementsByClassName("tag");
        for (var i=0;i<tags.length;i++) {
   
            tags[i].onclick=function () {
   
                for(var j=0;j<tags.length;j++){
   
                    tags[j].className="tag";
                }
                this.className="tag color";
            };
        }

js代码:

    var tagH = document.getElementById('tag_h');
    new Sortable(tagH, {
   
        animation: 500,
        delay: 1,
        // ghostClass: 'background-class'
    });
    var tagH2 = document.getElementById('tag_h2');
    new Sortable(tagH2, {
   
        animation: 500,
        delay: 1,
        // ghostClass: 'background-class'
    });

html代码：

  <div class="conter">
        <div class="title">我的频道
            <div class="r">编辑</div>
        </div>
        <div id="tag_h" class=&#