《Sortable.js》 Code Reading

new Sortable(document.getElementById('example1'), {
    animation: 150,
    ghostClass: 'blue-background-class'
});

/**
 * @class  Sortable
 * @param  {HTMLElement}  el
 * @param  {Object}       [options]
 */
function Sortable(el, options) {
  // ...
}

Sortable.prototype = /** @lends Sortable.prototype */ {
	constructor: Sortable,

  // 私有函数, 这里以 `_` 前缀进行标识 
	_isOutsideThisEl: function(target) {
		if (!this.el.contains(target) && target !== this.el) {
			lastTarget = null;
		}
	},
  
  _getDirection: function(evt, target) { ... },
  _delayedDragTouchMoveHandler: function (/** TouchEvent|PointerEvent **/e) { ... },
  _disableDelayedDrag: function () { ... },
  _disableDelayedDragEvents: function () { ... },

  // 公有函数 (目前这里只有个别)
  toArray: function () { ... },
  sort: function () { ... },
  save: function () { ... },
}

function Sortable(el, options) {
	// ZY_NOTE: only handles when el == DOM element type
	if (!(el && el.nodeType && el.nodeType === 1)) {
		throw `Sortable: \`el\` must be an HTMLElement`;
	}

	this.el = el;
	this.options = options = Object.assign({}, options);

	// Export instance
	el[expando] = this;

    // ZY_Note: the default configuration for sortable instance;
	let defaults = {
		group: null,
		sort: true,
		disabled: false,
		...
	};

	PluginManager.initializePlugins(this, el, defaults);

	// Set default options
	for (let name in defaults) {
		!(name in options) && (options[name] = defaults[name]);
	}

	_prepareGroup(options);

	// ZY_Note: using Object.bind to enhance the context for all private method, ensure 
    // all the binding 
	for (let fn in this) {
		if (fn.charAt(0) === '_' && typeof this[fn] === 'function') {
			this[fn] = this[fn].bind(this);
		}
	}

	// Bind events
	// ZY_Note: supporting multiple types of input:
	// touch events: https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Using_Touch_Events
	// pinter events: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events
	if (options.supportPointer) {
		on(el, 'pointerdown', this._onTapStart);
	} else {
		on(el, 'mousedown', this._onTapStart);
		on(el, 'touchstart', this._onTapStart);
	}

	if (this.nativeDraggable) {
		on(el, 'dragover', this);
		on(el, 'dragenter', this);
	}

	sortables.push(this.el);

	// Restore sorting
	options.store &&
		options.store.get &&
		this.sort(options.store.get(this) || []);

	// Add animation state manager
	Object.assign(this, AnimationStateManager());
}

if (filter) {
  filter = filter.split(',').some(function (criteria) {
    criteria = closest(originalTarget, criteria.trim(), el, false);

    if (criteria) {
      _dispatchEvent({
        sortable: _this,
        rootEl: criteria,
        name: 'filter',
        targetEl: target,
        fromEl: el,
        toEl: el
      });
      pluginEvent('filter', _this, { evt });
      return true;
    }
  });

  if (filter) {
    preventOnFilter && evt.preventDefault();
    return; // cancel dnd
  }
}

// ZY_NOTE: 在设置handle 后，发现不属于当前handle class
if (options.handle && !closest(originalTarget, options.handle, el, false)) {
  return;
}

function closest(/**HTMLElement*/el, /**String*/selector, /**HTMLElement*/ctx, includeCTX) {
	if (el) {
		ctx = ctx || document;

		do {
			if (
				selector != null &&
				(
					selector[0] === '>' ?
					el.parentNode === ctx && matches(el, selector) :
					matches(el, selector)
				) ||
				includeCTX && el === ctx
			) {
				return el;
			}

			if (el === ctx) break;
			/* jshint boss:true */
		} while (el = getParentOrHost(el));
	}

	return null;
}

if (!FireFox && _this.nativeDraggable) {
  dragEl.draggable = true;
}

// ZY_NOTE: 获取目标元素的位置信息
targetRect = getRect(target);

let direction = 0,
  targetBeforeFirstSwap,
  differentLevel = dragEl.parentNode !== el,
  differentRowCol = !_dragElInRowColumn(dragEl.animated && dragEl.toRect || dragRect, target.animated && target.toRect || targetRect, vertical),
  side1 = vertical ? 'top' : 'left',
  scrolledPastTop = isScrolledPast(target, 'top', 'top') || isScrolledPast(dragEl, 'top', 'top'),
  scrollBefore = scrolledPastTop ? scrolledPastTop.scrollTop : void 0;

if (lastTarget !== target) {
  targetBeforeFirstSwap = targetRect[side1];
  pastFirstInvertThresh = false;
  isCircumstantialInvert = !differentRowCol && options.invertSwap || differentLevel;
}
direction = _getSwapDirection(evt, target, targetRect, vertical, differentRowCol ? 1 : options.swapThreshold, options.invertedSwapThreshold == null ? options.swapThreshold : options.invertedSwapThreshold, isCircumstantialInvert, lastTarget === target);
let sibling;
if (direction !== 0) {
  // Check if target is beside dragEl in respective direction (ignoring hidden elements)
  let dragIndex = index(dragEl);
  do {
    dragIndex -= direction;
    sibling = parentEl.children[dragIndex];
  } while (sibling && (css(sibling, 'display') === 'none' || sibling === ghostEl));
}
// If dragEl is already beside target: Do not insert
if (direction === 0 || sibling === target) {
  return completed(false);
}
lastTarget = target;
lastDirection = direction;
let nextSibling = target.nextElementSibling,
  after = false;
after = direction === 1;

// ZY_NOTE: 通过onMove 判断是否应该进行移动
let moveVector = onMove(rootEl, el, dragEl, dragRect, target, targetRect, evt, after);
if (moveVector !== false) {
  if (moveVector === 1 || moveVector === -1) {
    after = moveVector === 1;
  }
  _silent = true;
  setTimeout(_unsilent, 30);
  capture();
  // ZY_NOTE: 判断是否需要进行append 或者位置插入
  if (after && !nextSibling) {
    // ZY_NOTE: 如果是向后插入，且后面没有sibling，那么直接改为append;
    el.appendChild(dragEl);
  } else {
    // ZY_NOTE: 其他情况下，直接使用insertBefore 插入当前元素 / 或者改变当前元素的位置。
    target.parentNode.insertBefore(dragEl, after ? nextSibling : target);
  }

  // ZY_NOTE：chrome 游览器滑动效果兼容逻辑
  if (scrolledPastTop) {
    scrollBy(scrolledPastTop, 0, scrollBefore - scrolledPastTop.scrollTop);
  }
  parentEl = dragEl.parentNode; 

  // must be done before animation
  if (targetBeforeFirstSwap !== undefined && !isCircumstantialInvert) {
    targetMoveDistance = Math.abs(targetBeforeFirstSwap - getRect(target)[side1]);
  }
  changed();
  return completed(true);
}

pluginEvent(eventName, sortable, evt) {
  this.eventCanceled = false;
  evt.cancel = () => {
    this.eventCanceled = true;
  };
  const eventNameGlobal = eventName + 'Global';
  plugins.forEach(plugin => {
    if (!sortable[plugin.pluginName]) return;
    // Fire global events if it exists in this sortable
    if (
      sortable[plugin.pluginName][eventNameGlobal]
    ) {
      sortable[plugin.pluginName][eventNameGlobal]({ sortable, ...evt });
    }

    // Only fire plugin event if plugin is enabled in this sortable,
    // and plugin has event defined
    if (
      sortable.options[plugin.pluginName] &&
      sortable[plugin.pluginName][eventName]
    ) {
      sortable[plugin.pluginName][eventName]({ sortable, ...evt });
    }
  });
}