可通过拖拉改变位置顺序的项目列表

Sortable List by drag & drop，通过项目条左边的横杆拖拉改变顺序。

h5, list, widget

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2290
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

window.addEventListener('touchmove', () => {});

class Sortable {

constructor(list, options) {
    this.list = (typeof list === 'string')
      ? document.querySelector(list)
      : list

this.items = Array.from(this.list.children)
    this.animation = false

this.options = Object.assign({
      animationSpeed: 200,
      animationEasing: 'ease-out',
    }, options || {})

this.dragStart = this.dragStart.bind(this)
    this.dragMove = this.dragMove.bind(this)
    this.dragEnd = this.dragEnd.bind(this)

this.list.addEventListener('touchstart', this.dragStart, false)
    this.list.addEventListener('mousedown', this.dragStart, false)
  }

dragStart(e) {
    if (this.animation) return
    if (e.type === 'mousedown' && e.which !== 1) return
    if (e.type === 'touchstart' && e.touches.length > 1) return

this.handle = null

let el = e.target;
    while (el) {
      if (el.hasAttribute('sortable-handle')) this.handle = el
      if (el.hasAttribute('sortable-item')) this.item = el
      if (el.hasAttribute('sortable-list')) break;
      el = el.parentElement;
    }

if (!this.handle) return

this.list.style.position = 'relative'
    this.list.style.height = this.list.offsetHeight + 'px'

this.item.classList.add('is-dragging')

this.itemHeight = this.items[1].offsetTop
    this.listHeight = this.list.offsetHeight
    this.startTouchY = this.getDragY(e)
    this.startTop = this.item.offsetTop

const offsetsTop = this.items.map(item => item.offsetTop)

this.items.forEach((item, index) => {
      item.style.position = 'absolute'
      item.style.top = 0
      item.style.left = 0
      item.style.width = '100%'
      item.style.transform = `translateY(${offsetsTop[index]}px)`
      item.style.zIndex = (item == this.item) ? 2 : 1
    })

setTimeout(() => {
      this.items.forEach(item => {
        if (this.item == item) return
        item.style.transition = `transform ${this.options.animationSpeed}ms ${this.options.animationEasing}`
      })
    })

this.positions = this.items.map((item, index) => index)
    this.position = Math.round((this.startTop / this.listHeight) * this.items.length)

this.touch = e.type == 'touchstart'
    window.addEventListener((this.touch ? 'touchmove' : 'mousemove'), this.dragMove, { passive: false })
    window.addEventListener((this.touch ? 'touchend' : 'mouseup'), this.dragEnd, false)
  }

dragMove(e) {
    if (this.animation) return

const top = this.startTop + this.getDragY(e) - this.startTouchY
    const newPosition = Math.round((top / this.listHeight) * this.items.length)

this.item.style.transform = `translateY(${top}px)`

this.positions.forEach(index => {
      if (index == this.position || index != newPosition) return
      this.swapElements(this.positions, this.position, index)
      this.position = index
    })

this.items.forEach((item, index) => {
      if (item == this.item) return
      item.style.transform = `translateY(${this.positions.indexOf(index) * this.itemHeight}px)`
    })

e.preventDefault()
  }

dragEnd(e) {
    this.animation = true

this.item.style.transition = `all ${this.options.animationSpeed}ms ${this.options.animationEasing}`
    this.item.style.transform = `translateY(${this.position * this.itemHeight}px)`

this.item.classList.remove('is-dragging')

setTimeout(() => {
      this.list.style.position = ''
      this.list.style.height = ''

this.items.forEach(item => {
        item.style.top = ''
        item.style.left = ''
        item.style.right = ''
        item.style.position = ''
        item.style.transform = ''
        item.style.transition = ''
        item.style.width = ''
        item.style.zIndex = ''
      })

this.positions.map(i => this.list.appendChild(this.items[i]))
      this.items = Array.from(this.list.children)

this.animation = false
    }, this.options.animationSpeed)

window.removeEventListener((this.touch ? 'touchmove' : 'mousemove'), this.dragMove, { passive: false })
    window.removeEventListener((this.touch ? 'touchend' : 'mouseup'), this.dragEnd, false)
  }

swapElements(array, a, b) {
    const temp = array[a]
    array[a] = array[b]
    array[b] = temp
  }

getDragY(e) {
    return e.touches ? (e.touches[0] || e.changedTouches[0]).pageY : e.pageY
  }

}

const sortable = new Sortable('.list')

编译

CSS

@import url("https://fonts.googleapis.com/css?family=Montserrat:500");
body {
    margin: 25px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    background: #e0e1e1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
}
* {
    box-sizing: border-box;
}
.title {
    font-weight: 500;
    text-align: center;
    margin-bottom: 20px;
    font-size: 20px;
    color: #0E254E;
}
.list {
    margin: 0 auto;
    width: 100%;
    max-width: 380px;
    user-select: none;
}
.list__item {
    transition: box-shadow 200ms ease-out, opacity 200ms ease-out;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
    display: flex;
}
.list__item:not(:last-child) {
    margin-bottom: 7px;
}
.list__item.is-dragging {
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.1);
    opacity: 0.8;
}
.list__item-content {
    width: calc(100% - 40px);
    padding: 10px 15px;
}
.list__item-title,
.list__item-description {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.list__item-title {
    font-size: 15px;
    color: #0E254E;
}
.list__item-description {
    font-size: 13px;
    color: #66748E;
}
.list__item-handle {
    position: relative;
    width: 40px;
    cursor: pointer;
}
.list__item-handle:before,
.list__item-handle:after {
    content: '';
    position: absolute;
    left: 15px;
    right: 15px;
    top: 50%;
    height: 1px;
    background: #c2cada;
}
.list__item-handle:before {
    transform: translateY(-4px);
}
.list__item-handle:after {
    transform: translateY(4px);
}

HTML

<div class="title">Sortable List</div>
<div class="list" sortable-list="sortable-list">
    <div class="list__item" sortable-item="sortable-item">
        <div class="list__item-content">
            <div class="list__item-title">List Item 1</div>
            <div class="list__item-description">Aenean aliquam molestie urna, vel aliquam.</div>
        </div>
        <div class="list__item-handle" sortable-handle="sortable-handle"></div>
    </div>
    <div class="list__item" sortable-item="sortable-item">
        <div class="list__item-content">
            <div class="list__item-title">List Item 2</div>
            <div class="list__item-description">Aenean aliquam molestie urna, vel aliquam.</div>
        </div>
        <div class="list__item-handle" sortable-handle="sortable-handle"></div>
    </div>
    <div class="list__item" sortable-item="sortable-item">
        <div class="list__item-content">
            <div class="list__item-title">List Item 3</div>
            <div class="list__item-description">Aenean aliquam molestie urna, vel aliquam.</div>
        </div>
        <div class="list__item-handle" sortable-handle="sortable-handle"></div>
    </div>
    <div class="list__item" sortable-item="sortable-item">
        <div class="list__item-content">
            <div class="list__item-title">List Item 4</div>
            <div class="list__item-description">Aenean aliquam molestie urna, vel aliquam.</div>
        </div>
        <div class="list__item-handle" sortable-handle="sortable-handle"></div>
    </div>
    <div class="list__item" sortable-item="sortable-item">
        <div class="list__item-content">
            <div class="list__item-title">List Item 5</div>
            <div class="list__item-description">Aenean aliquam molestie urna, vel aliquam.</div>
        </div>
        <div class="list__item-handle" sortable-handle="sortable-handle"></div>
    </div>
    <div class="list__item" sortable-item="sortable-item">
        <div class="list__item-content">
            <div class="list__item-title">List Item 6</div>
            <div class="list__item-description">Aenean aliquam molestie urna, vel aliquam.</div>
        </div>
        <div class="list__item-handle" sortable-handle="sortable-handle"></div>
    </div>
    <div class="list__item" sortable-item="sortable-item">
        <div class="list__item-content">
            <div class="list__item-title">List Item 7</div>
            <div class="list__item-description">Aenean aliquam molestie urna, vel aliquam.</div>
        </div>
        <div class="list__item-handle" sortable-handle="sortable-handle"></div>
    </div>
    <div class="list__item" sortable-item="sortable-item">
        <div class="list__item-content">
            <div class="list__item-title">List Item 8</div>
            <div class="list__item-description">Aenean aliquam molestie urna, vel aliquam.</div>
        </div>
        <div class="list__item-handle" sortable-handle="sortable-handle"></div>
    </div>
    <div class="list__item" sortable-item="sortable-item">
        <div class="list__item-content">
            <div class="list__item-title">List Item 9</div>
            <div class="list__item-description">Aenean aliquam molestie urna, vel aliquam.</div>
        </div>
        <div class="list__item-handle" sortable-handle="sortable-handle"></div>
    </div>
    <div class="list__item" sortable-item="sortable-item">
        <div class="list__item-content">
            <div class="list__item-title">List Item 10</div>
            <div class="list__item-description">Aenean aliquam molestie urna, vel aliquam.</div>
        </div>
        <div class="list__item-handle" sortable-handle="sortable-handle"></div>
    </div>
</div>

Sortable List by drag & drop，通过项目条左边的横杆拖拉改变顺序。

h5, list, widget

编辑器支持Emmet

快捷键

Sortable List by drag & drop，通过项目条左边的横杆拖拉改变顺序。

h5, list, widget

巧妙使用钟表线条位置变换实现的计时器

卡通风格的待办事项列表界面模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：