Vue-平滑拖放

下载代码

html

css

分享到微信朋友圈

html

Trello style (not smooth)
      <input v-model="settings.trelloStyle" type="checkbox">
    </label>
    <label>
      Animate on end
      <input v-model="settings.animateEnd" type="checkbox">
    </label>
    <h3>Transform</h3>
    <label>
      Origin
      <select v-model="settings.transformOriginMode">
        <option value="mouse">Mouse position</option>
        <option value="center">Center</option>
      </select>
    </label>
    <label>
      Scale
      <input v-model="settings.scale" type="number">
    </label>
    <h3>Rotation</h3>
    <label>
      Offset Min
      <input v-model="settings.rotationOffset.min" type="number" :disabled="!settings.smooth">
    </label>
    <label>
      Offset Max
      <input v-model="settings.rotationOffset.max" type="number" :disabled="!settings.smooth">
    </label>
    <label>
      Mitigation
      <input v-model="settings.rotationMitigation" type="number" :disabled="!settings.smooth">
    </label>
    <h3>Debug</h3>
    <label>
      <input v-model="settings.debug.dataInspector" type="checkbox">
      Data inspector
    </label>
  </div>
  <div class="data-inspector" v-if="settings.debug.dataInspector">
    <p>Mouse X: {{ mousePos.x }}</p>
    <p>Mouse Y: {{ mousePos.y }}</p>
    <p>Dragged card index: {{ draggedCardIdx }}</p>
    <p>Pane overlapped index: {{ paneOverlappedIdx }}</p>
    <p>Ghost card X: {{ ghostCardStyle.pos.x }}</p>
    <p>Ghost card Y: {{ ghostCardStyle.pos.y }}</p>
    <p>Mouse distance from middle: {{ ghostCardStyle.percentDistanceMiddle * 100 }}%</p>
    <p>Ghost card rotation: {{ Math.round(ghostCardStyle.rotation * 100) / 100 }}</p>
    <p>Motion velocity: {{ ghostCardStyle.velocity }}</p>
  </div>
</div>

css

html,
body {
  background: #0079bf;
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Droid Sans, Helvetica Neue, sans-serif;
  color: #172b4d;
}

#app {
  background: #0079bf;
  height: 100%;
  overflow-x: auto;
}

main {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  padding: 20px 0 30px 0;
  box-sizing: border-box;
}
main:before {
  content: '';
  float: right;
  min-width: 20px;
  width: 10px;
  height: 100%;
}
main:after {
  content: '';
  float: right;
  min-width: 20px;
  width: 10px;
  height: 100%;
}

.pane {
  display: inline-block;
  height: 100%;
  min-width: 272px;
  max-width: 272px;
  margin: 0 5px;
  border-radius: 3px;
  padding: 10px;
  box-sizing: border-box;
  background: #ebecf0;
}

.pane-header {
  font-weight: 600;
}

.pane-card {
  background: #ffffff;
  padding: 10px;
  margin: 10px 0;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(9, 30, 66, 0.25);
  cursor: grab;
}
.pane-card:hover {
  background: #f4f5f7;
}
.pane-card.dragging {
  color: transparent;
  background: none;
  border: 2px dashed rgba(0, 0, 0, 0.2);
  box-shadow: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  cursor: grabbing;
}

.author {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  color: #FFF;
}
.author a {
  color: inherit;
}

#ghost-card {
  position: absolute;
  user-select: none;
  pointer-events: none;
  top: 100vh;
  left: 100vw;
  opacity: 0;
  transform-origin: center;
  transform: scale(1) rotate(0);
  box-shadow: 0 1px 0 rgba(9, 30, 66, 0.25);
  transition: transform 0.04s ease-in-out;
}
#ghost-card.animate {
  transition: box-shadow 0.1s ease-in-out;
  transition: transform 0.05s ease-in-out;
}
#ghost-card.active {
  opacity: 1;
  box-shadow: 0 12px 24px -6px rgba(9, 30, 66, 0.25), 0 0 0 1px rgba(9, 30, 66, 0.08);
}
#ghost-card.leaving {
  transition: all .1s ease;
  box-shadow: 0 1px 0 rgba(9, 30, 66, 0.25);
}

.settings {
  position: absolute;
  top: 0;
  right: 0;
  width: 240px;
  padding: 5px 10px;
  box-sizing: border-box;
  background: #ebecf0;
  color: #172b4d;
  border-radius: 0 0 0 7px;
  max-height: 40px;
  transition: all .2s ease-in-out;
  box-shadow: -1px 1px 10px rgba(9, 30, 66, 0.1);
  overflow: hidden;
  cursor: pointer;
}
.settings.expanded {
  max-height: 100vh;
  overflow: auto;
  cursor: default;
}
.settings.expanded h2 {
  font-size: 1.2em;
}
.settings h2 {
  font-size: 1em;
  font-weight: 700;
  text-align: left;
  margin: 7px 0;
  transition: all .1s ease-in-out;
  display: flex;
  justify-content: space-between;
}
.settings h2 button {
  border: none;
  background: none;
  cursor: pointer;
}
.settings h3 {
  font-size: 1em;
  font-weight: 600;
  text-align: left;
  margin: 15px 0 7.5px 0;
}
.settings label {
  display: block;
  margin: 5px 0;
}
.settings label input {
  border: none;
  border-radius: 3px;
  padding: 3px 3px;
}
.settings label input[type=number] {
  display: block;
  margin: 5px 0 10px 0;
}
.settings label input[disabled=disabled] {
  cursor: not-allowed;
  opacity: .6;
}
.settings label select {
  display: block;
  margin: 5px 0 10px 0;
}

.data-inspector {
  position: absolute;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #FFF;
  padding: 10px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
}
.data-inspector p {
  margin: 0;
}

JavaScript

const SETTINGS = {
  trelloStyle: false,
  animateEnd: true,
  transformOriginMode: 'mouse', // or 'center'
  scale: 1.1,
  rotationOffset: {
    min: 1.2,
    max: 2
  },
  rotationMitigation: 0.2,
  debug: {
    dataInspector: false
  }
}

new Vue({
  el: '#app',
  data: {
    mousePos: {
      x: -1000,
      y: -1000
    },
    lastMousePos: { x: 0, y: 0 },
    draggedCardIdx: -1,
    paneOverlappedIdx: -1,
    ghostCardStyle: {
      leaving: false,
      pos: {
        x: 0,
        y: 0
      },
      width: 0,
      cursorDistance: {
        x: 0,
        y: 0
      },
      percentDistanceMiddle: 0,
      transform: '',
      transformOrigin: '',
      velocity: 0,
      rotation: 0
    },
    cards: [
      {
        name: 'Something',
        paneIndex: 0
      }
    ],
    panes: [
      {
        name: 'To do'
      },
      {
        name: 'Doing'
      },
      {
        name: 'Done'
      }
    ],
    settings: SETTINGS,
    settingsExpanded: false
  },
  computed: {
    filledPanes() {
      let filledPanes = this.panes.map(item => ({ name: item.name }));

for (let i = 0; i < this.cards.length; i++) {
        let pane = filledPanes[this.cards[i].paneIndex];

if (!pane.cards) pane.cards = [];
        pane.cards.push({ ...this.cards[i], index: i });
      }

return filledPanes;
    },
    draggedCard() {
      return this.cards[this.draggedCardIdx] || { name: '' };
    }
  },
  methods: {
    onDragStart(e, index) {
      let cardEl = this.$refs[`card-${index}`][0];
      let cardRect = cardEl.getBoundingClientRect();
      
      document.documentElement.style.cursor = 'grabbing';

let paddingLeft = parseFloat(getComputedStyle(cardEl).paddingLeft);
      let paddingRight = parseFloat(getComputedStyle(cardEl).paddingRight);

this.mousePos.x = e.pageX;
      this.mousePos.y = e.pageY;

this.draggedCardIdx = index;

this.ghostCardStyle.width =
        cardEl.clientWidth - paddingLeft - paddingRight;
      this.ghostCardStyle.cursorDistance.x = e.pageX - cardRect.x;
      this.ghostCardStyle.cursorDistance.y = e.pageY - cardRect.y;

this.setGhostCardStyle(e);
      this.updateUI();

if (this.settings.transformOriginMode === 'center')
        this.ghostCardStyle.transformOrigin = 'center';
      else
        this.ghostCardStyle.transformOrigin = `${this.ghostCardStyle.cursorDistance.x}px ${this.ghostCardStyle.cursorDistance.y}px`;
      this.ghostCardStyle.percentDistanceMiddle =
        this.ghostCardStyle.cursorDistance.x - cardEl.clientWidth / 2;
      this.ghostCardStyle.percentDistanceMiddle = Math.abs(
        this.ghostCardStyle.percentDistanceMiddle
      );
      this.ghostCardStyle.percentDistanceMiddle /= cardEl.clientWidth / 2;
      this.ghostCardStyle.percentDistanceMiddle =
        Math.round(this.ghostCardStyle.percentDistanceMiddle * 100) / 100;
    },

onDrag(e) {
      e = e || window.event;
      if (this.draggedCardIdx === -1)
        return;
      this.mousePos.x = e.pageX;
      this.mousePos.y = e.pageY;
    },

updateUI() {
      let dragX = this.mousePos.x,
          dragY = this.mousePos.y;

if (this.draggedCardIdx === -1 || this.ghostCardStyle.leaving) return;

if (!dragX && !dragY) {
        this.lastMousePos.x = 0;
        this.lastMousePos.y = 0;
        return requestAnimationFrame(this.updateUI);
      }
      this.findTransformValues();
      this.setGhostCardStyle(true);

let isOverlapping;

for (let i = 0, paneEl = null; (paneEl = this.$refs[`pane-${i}`]); i++) {
        paneEl = paneEl[0] ? paneEl[0] : paneEl;

isOverlapping = this.checkOverlap(
          { x: dragX, y: dragY },
          paneEl.getBoundingClientRect()
        );

if (isOverlapping && this.paneOverlappedIdx === i)
          return requestAnimationFrame(this.updateUI);
        else if (isOverlapping) {
          this.paneOverlappedIdx = i;
          break;
        }
      }

if (!isOverlapping) {
        return requestAnimationFrame(this.updateUI);
      }
      this.putCardInPane();
      return requestAnimationFrame(this.updateUI);
    },

onDragStop() {
      if (this.draggedCardIdx === -1)
        return;
            document.documentElement.style.cursor = 'default';
      let cardEl = this.$refs[`card-${this.draggedCardIdx}`] && this.$refs[`card-${this.draggedCardIdx}`][0]
      let cardRect = cardEl.getBoundingClientRect();

if (!this.settings.animateEnd) {
        return this.resetValues()
      }
      setTimeout(() => {
        this.resetValues();
      }, 100);
      this.ghostCardStyle.leaving = true;
      let xOffset = cardRect.x - this.ghostCardStyle.pos.x
      let yOffset = cardRect.y - this.ghostCardStyle.pos.y
      this.ghostCardStyle.transform = `scale(1) translate(${xOffset}px, ${yOffset}px)`
    },

resetValues() {
      this.draggedCardIdx = -1;
      this.paneOverlappedIdx = -1;
      this.lastMousePos.x = 0;
      this.lastMousePos.y = 0;
      this.ghostCardStyle.x = -1000;
      this.ghostCardStyle.y = -1000;
      this.ghostCardStyle.width = 0;
      this.ghostCardStyle.cursorDistance.x = 0;
      this.ghostCardStyle.cursorDistance.y = 0;
      this.ghostCardStyle.transform = '';
      this.ghostCardStyle.leaving = false;
      this.ghostCardStyle.percentDistanceMiddle = 0;
    },

checkOverlap(drag, rect) {
      if (drag.x < rect.x || drag.x > rect.x + rect.width) return false;
      if (drag.y < rect.y || drag.y > rect.y + rect.height) return false;
      return true;
    },

putCardInPane() {
      this.cards[this.draggedCardIdx].paneIndex = this.paneOverlappedIdx;
    },

setGhostCardStyle(isDragstart) {
      let dragX = this.mousePos.x,
          dragY = this.mousePos.y;
      let transform = [];

if (isDragstart)
        transform.push(`scale(${this.settings.scale})`);

transform.push(`rotate(${this.ghostCardStyle.rotation}deg)`);
      this.ghostCardStyle.transform = transform.join(' ');
      this.ghostCardStyle.pos.x = dragX - this.ghostCardStyle.cursorDistance.x;
      this.ghostCardStyle.pos.y = dragY - this.ghostCardStyle.cursorDistance.y;
    },

findTransformValues() {

if (this.settings.trelloStyle) {
        this.ghostCardStyle.rotation = '4';
        this.lastMousePos.x = this.mousePos.x;
        this.lastMousePos.y = this.mousePos.y;
        return;
      }

let velocity = this.mousePos.x - this.lastMousePos.x;
      let rotation = this.ghostCardStyle.rotation || 0;

let rotationMin = this.settings.rotationOffset.min;
      let rotationMax = this.settings.rotationOffset.max;
      let rotationOffset =
          (rotationMax - rotationMin) *
          (1 - this.ghostCardStyle.percentDistanceMiddle);
      let rotationMitigation = this.settings.rotationMitigation

rotation =
        rotation * (1 - rotationMitigation) +
        this.sigmoid(velocity) * (rotationMin + rotationOffset);
      if (Math.abs(rotation) < 0.01) rotation = 0;

this.ghostCardStyle.velocity = velocity;
      this.ghostCardStyle.rotation = rotation
      this.lastMousePos.x = this.mousePos.x;
      this.lastMousePos.y = this.mousePos.y;
    },

sigmoid(x) {
      return x / (1 + Math.abs(x));
    },

expandSettings() {
      if (this.settingsExpanded) return;
      this.settingsExpanded = true;
    },

wrapSettings() {
      this.settingsExpanded = false;
    }
  }
});

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg