时间戳

首页 > 解决方案 > CSS如何强制div流畅移动

javascript - CSS如何强制div流畅移动

问题描述

我有以下代码：

/* Made with love by @fitri
 This is a component of my ReactJS project
 https://codepen.io/fitri/full/oWovYj/ */

function enableDragSort(listClass) {
  const sortableLists = document.getElementsByClassName(listClass);
  Array.prototype.map.call(sortableLists, (list) => {enableDragList(list)});
}

function enableDragList(list) {
  Array.prototype.map.call(list.children, (item) => {enableDragItem(item)});
}

function enableDragItem(item) {
  item.setAttribute('draggable', true)
  item.ondrag = handleDrag;
  item.ondragend = handleDrop;
}

function handleDrag(item) {
  const selectedItem = item.target,
        list = selectedItem.parentNode,
        x = event.clientX,
        y = event.clientY;
  
  selectedItem.classList.add('drag-sort-active');
  let swapItem = document.elementFromPoint(x, y) === null ? selectedItem : document.elementFromPoint(x, y);
  
  if (list === swapItem.parentNode) {
    swapItem = swapItem !== selectedItem.nextSibling ? swapItem : swapItem.nextSibling;
    list.insertBefore(selectedItem, swapItem);
  }
}

function handleDrop(item) {
  item.target.classList.remove('drag-sort-active');
}

(()=> {enableDragSort('drag-sort-enable')})();
html,
body {
  height: 100%;
}

.container {
  margin: 20px auto 0;
  max-width: 500px;
  word-wrap:break-word
}

* {
  box-sizing: border-box;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  margin: 5px 0;
  padding: 0 20px;
  height: 40px;
  line-height: 40px;
  border-radius: 3px;
  background: #136a8a;
background: -webkit-linear-gradient(to right, #267871, #136a8a);
background: linear-gradient(to right, #267871, #136a8a);
  color: #fff;
  list-style: none;
}

li.drag-sort-active {
  background: transparent;
  color: transparent;
  border: 1px solid #4ca1af;
}

span.drag-sort-active {
  background: transparent;
  color: transparent;
}
<div class="container">
  <h3>Drag and Sort :</h3>
  <div class="drag-sort-enable">
  </div>
  <hr>
  <ul class="drag-sort-enable">
    <li>Application</li>
    <li>Blank</li>
    <li>Class</li>
    <li>Data</li>
    <li>Element</li>
  </ul>
</div>

当一个可排序的项目被拖到另一个之上时，它会滑开，为该元素腾出空间。是否有一个 css 类或一些我可以添加的 js 代码将强制 lis 进行动画处理，以便它们需要一点时间移动，使其看起来流畅？

如果没有，我将如何使用我们的代码实现这一目标？谢谢！

标签： javascripthtmlcss

解决方案

有没有你看到这种行为的资源、gif 或网站？如果您向我们展示预期的动画，我们可以为您提供更好的帮助。我不确定我是否理解了。

推荐阅读