怎么定义拖拽到另一个列表未释放的样式？

[flower0wine]

标题所说的样式并不是 ghostClass 或 dragClass。

我不知道我是否能描述清楚这个问题，我最近想做一个类似于低代码平台的页面，我在不久前发现了这个宝藏项目，它相当强大。但是我觉得还有可以改进的地方。

我在使用过程并没有发现什么 Bug，但是有一个地方我感觉可以改进一下，为了说清楚，我花了一个小时左右将我的项目的部分代码转移到一个在线编码平台，首先说明它并没有 Bug，此外我的项目是以 Vue2 开发的，而这里使用的是 Vue3，所以有些地方你看起来会有点奇怪。项目地址

好，在看完上面的例子后，我觉得可以改进的地方就是当开发低代码平台时，此时我有两个列表A、B，我从列表 A 中拖拽一个元素到列表 B，此时我还没有释放该元素，但是此时我想在释放该元素之前看到这个元素的简要信息，为此我们可能不是简单地将元素从 A 移动到 B，而是修改这个元素的 DOM 结构来表明这个元素在 B 列表的大概的样子。

我在这个问题上挣扎了两三天，开始时寻找有没有可用的属性或者函数能解决这个问题，后来发现了 ghostClass 和 dragClass，但是它们能做的有点少。也尝试使用 clone 属性来解决这个问题，但是它貌似只能修改数据，不能修改 DOM 结构。最后我尝试开发一个插件来解决这个问题，但是在阅读源码并尝试了多次后发现在 src/Sortable.js 的一个 dragEl 属性对应的元素是直接从列表 A 加到列表 B 的，并且还有其他的插件是需要使用到这个属性的。

我最初的想法是在元素插入到列表 B 之前，创建一个 div 元素来替换 dragEl，下面是我的代码，在 src/Sortable.js 文件中修改，当然这是个简单的示例。

let div;

function createEl() {
	const size = Math.random().toString().substring(2, 4);
	const color = Math.random().toString(16).substring(2, 8);

	div = document.createElement("div");
	div.style.width = `${size}px`;
	div.style.height = `${size}px`;
	div.style.background = `#${color}`;
}

_prepareDragStart: function (/** Event */evt, /** Touch */touch, /** HTMLElement */target) {
    let _this = this,
	    el = _this.el,
	    options = _this.options,
	    ownerDocument = el.ownerDocument,
	    dragStartFn;
    // Create new elements before starting each drag
    createEl();

// ...more
  dragOverEvent('revert');
  
if (!Sortable.eventCanceled) {
      if (nextEl) {
          rootEl.insertBefore(div, nextEl);
      } else {
          rootEl.appendChild(div);
      }
}

// ,,,more

if (elLastChild && elLastChild.nextSibling) { // the last draggable element is not the last node
    el.insertBefore(div, elLastChild.nextSibling);
}
else {
    el.appendChild(div);
}
// ...more

然后这个是它的结果，我保存为了一个 mp4 视频。当然从视频来看左边的列表由于没有移除 dragEl，所以有点奇怪，我尝试使用 dragEl.remove() 但是有插件使用了 dragEl.parentNode 这个属性，由于 dragEl 从页面上移除了，所以它为 null，最终导致错误。

default.mp4

当然这个是我的一个想法，这个代码是我的个人网站的一部分，纯属个人兴趣来制作的。

[z1170817602]

我也在做低代码项目，有时间可以探讨一下。