import Vue from 'vue' const drag = Vue.directive('drag', { bind: function(el) {}, inserted: function(el) { el.onmousedown = function(e) { var disx = e.pageX - el.offsetLeft var disy = e.pageY -
<template> <div id="drag"> <div id="drag-box" class="drag-box" draggable="true" :style="{ top, left }" @dragstart.stop="onDragstart" @drag
<template> <ul class="list"> <li @dragenter="dragenter($event, index)" @dragover="dragover($event, index)" @dragstart="dragstart(index)" draggable v-for="(item, index) in list" :key="it
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>发光输入框</title> <style type="text/css"> #box { position: absolute; width: 100px; heigh
效果： 实现： 1、创建SliderCheck.vue组件 <template> <div class="slider-check-box"> <div class="slider-check" :class="rangeStatus ? 'success' : ''"> <i @mousedown="rangeMove
JavaScript实现简单的圆球反弹运动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatib
面向对象，就是将一系列具有相同属性的元素提取出来，需要用的时候就new一个。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * {margin: 0;padding: 0;} div{
先看效果图： 上源码 html代码 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=&q
实现类似ios端微信的左滑显示置顶、删除按钮的功能，首先需将按钮部分设为绝对定位，并且right设为负值溢出屏幕。利用小程序事件处理的api，分别读取触摸开始，触摸移动时，触摸结束的X/Y坐标，根据差值来改变整个卡片的位置。 这里有一个细节，为了防止按钮的点击干扰到卡片主部分的滑动
