How to use sortablejs - 10 common examples

}
                return ret;
            };

            // make layer list sortable
            sortable.create(element[0].querySelector('#layer-list'), {
                onSort() {
                    // update layer order
                    _.each(this.toArray(), (val, i) => {
                        scope.layers.layerOrder[i] = val;
                    });
                },
            });

            // make adjustments sortable
            sortable.create(element[0].querySelector('#adjustment-list'), {
                onSort({ oldIndex, newIndex }) {
                    const adjustments = scope.state.adjustments.get(scope.state.active);
                    const adjustment = adjustments.splice(oldIndex, 1)[0];
                    adjustments.splice(newIndex, 0, adjustment);
                    scope.applyState();
                },
                handle: '.sort-handle',
            });
        },
        restrict: 'E',

private setSort() {
        const draggableSelect = this.$refs.draggableSelect as Select;
        const el = draggableSelect.$el.querySelectorAll(
            ".el-select__tags > span"
        )[0] as HTMLElement;
        this.sortable = Sortable.create(el, {
            ghostClass: "sortable-ghost", // Class name for the drop placeholder
            onEnd: evt => {
                if (
                    typeof evt.oldIndex !== "undefined" &&
                    typeof evt.newIndex !== "undefined"
                ) {
                    const targetRow = this.value.splice(evt.oldIndex, 1)[0];
                    this.value.splice(evt.newIndex, 0, targetRow);
                }
            }
        });
    }
}

setSort() {
      const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0];
      this.sortable = Sortable.create(el, {
        ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
        setData: function(dataTransfer) {
          // to avoid Firefox bug
          // Detail see : https://github.com/RubaXa/Sortable/issues/1012
          dataTransfer.setData('Text', '');
        },
        onEnd: evt => {
          const targetRow = this.list.splice(evt.oldIndex, 1)[0];
          this.list.splice(evt.newIndex, 0, targetRow);

          // for show the changes, you can delete in you code
          const tempIndex = this.newList.splice(evt.oldIndex, 1)[0];
          this.newList.splice(evt.newIndex, 0, tempIndex);
        },
      });
    },

setState({ beginUpload: false, fileUploaded: false});
            },
            // 'Key': function(up, file) {
            //   // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
            //   // 该配置必须要在 unique_names: false , save_key: false 时才生效
            //
            //   var key = "";
            //   // do something with key here
            //   return key
            // }
          }
        });
      }
    });

    new Sortable(el, {
      sort: true,  // sorting inside list
      delay: 0, // time in milliseconds to define when the sorting should start
      store: {
        set: (sortable) => {
          const order = sortable.toArray();
          Meteor.call('singlePages.changeIndex', order);
        }
      },
      animation: 150,  // ms, animation speed moving items when sorting, `0` — without animation
      dataIdAttr: 'data-id'
    });
  }
};

init () {
        this.initSuits()
        const $sortContainer = this.node.name === 'HView' ? this.$el.children[0] : this.$el

        this.$sortable = new Sortable($sortContainer, {
          group: this.nodeUid,
          draggable: '.comp-suit',
          // sort: false,
          // Element is dropped into the list from another list
          // Changed sorting within list
          // onUpdate: this.handleDragUpdate,
          onSort: this.handleDragSort
        })
      },
      handleDragSort (e) {

dataTransfer.setData("Text", dragEl.querySelector(".arg-title").textContent);
        },
        onEnd: function(evt) {
            if (this.removeIntent) {
                evt.item.remove();
                evt.target.dispatchEvent(this.manager.operationremove);
            }
        }.bind(this),
        onSort: function(evt) {
            if (evt.from.id === "rec-list") {
                document.dispatchEvent(this.manager.statechange);
            }
        }.bind(this)
    });

    Sortable.utils.on(recList, "dragover", function() {
        this.removeIntent = false;
    }.bind(this));

    Sortable.utils.on(recList, "dragleave", function() {
        this.removeIntent = true;
        this.app.progress = 0;
    }.bind(this));

    Sortable.utils.on(recList, "touchend", function(e) {
        const loc = e.changedTouches[0];
        const target = document.elementFromPoint(loc.clientX, loc.clientY);

        this.removeIntent = !recList.contains(target);
    }.bind(this));

    // Favourites category

if (evt.from.id === "rec-list") {
                document.dispatchEvent(this.manager.statechange);
            }
        }.bind(this)
    });

    Sortable.utils.on(recList, "dragover", function() {
        this.removeIntent = false;
    }.bind(this));

    Sortable.utils.on(recList, "dragleave", function() {
        this.removeIntent = true;
        this.app.progress = 0;
    }.bind(this));

    Sortable.utils.on(recList, "touchend", function(e) {
        const loc = e.changedTouches[0];
        const target = document.elementFromPoint(loc.clientX, loc.clientY);

        this.removeIntent = !recList.contains(target);
    }.bind(this));

    // Favourites category
    document.querySelector("#categories a").addEventListener("dragover", this.favDragover.bind(this));
    document.querySelector("#categories a").addEventListener("dragleave", this.favDragleave.bind(this));
    document.querySelector("#categories a").addEventListener("drop", this.favDrop.bind(this));
};

import createFlash from '~/flash';
import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants';
import { sprintf, __ } from '~/locale';
import eventHub from '../eventhub';
import {
  getBoardSortableDefaultOptions,
  sortableStart,
  sortableEnd,
} from '../mixins/sortable_default_options';
import boardsStore from '../stores/boards_store';
import boardCard from './board_card_deprecated.vue';
import boardNewIssue from './board_new_issue_deprecated.vue';

// This component is being replaced in favor of './board_list.vue' for GraphQL boards

Sortable.mount(new MultiDrag());

export default {
  name: 'BoardList',
  components: {
    boardCard,
    boardNewIssue,
    GlLoadingIcon,
  },
  props: {
    disabled: {
      type: Boolean,
      required: true,
    },
    list: {
      type: Object,
      required: true,

const {
          item: { dataset, classList },
        } = e;

        if (
          classList &&
          classList.contains('multi-select') &&
          !classList.contains('js-multi-select')
        ) {
          const issue = this.list.findIssue(Number(dataset.issueId));
          boardsStore.toggleMultiSelect(issue);
        }
      },
    });

    this.sortable = Sortable.create(this.$refs.list, options);

    // Scroll event on list to load more
    this.$refs.list.addEventListener('scroll', this.onScroll);
  },
  beforeDestroy() {

// shaka
var shaka = require("shaka-player");
_define("shaka", function() {
    return shaka;
});

// swiper
var swiper = require("swiper");
require("swiper/dist/css/swiper.min.css");
_define("swiper", function() {
    return swiper;
});

// sortable
var sortable = require("sortablejs").default;
_define("sortable", function() {
    return sortable;
});

// webcomponents
var webcomponents = require("webcomponents.js/webcomponents-lite");
_define("webcomponents", function() {
    return webcomponents
});

// libjass
var libjass = require("libjass");
require("libjass/libjass.css");
_define("libjass", function() {
    return libjass;
});