首页 > TAG信息列表 > disX

drag 自定义指令

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 -

vue 拖拽移动示例

<template> <div id="drag"> <div id="drag-box" class="drag-box" draggable="true" :style="{ top, left }" @dragstart.stop="onDragstart" @drag

vue拖拽事件

<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

vue登录时人机验证-滑块验证

效果：   实现： 　　1、创建SliderCheck.vue组件 <template> <div class="slider-check-box"> <div class="slider-check" :class="rangeStatus ? 'success' : ''"> <i @mousedown="rangeMove

20.JavaScript实现简单的圆球反弹运动

JavaScript实现简单的圆球反弹运动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D

HTML5实现div拖拽

<!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

js动画之面向对象二

面向对象，就是将一系列具有相同属性的元素提取出来，需要用的时候就new一个。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * {margin: 0;padding: 0;} div{

利用css3和js实现旋转木马图片小demo

先看效果图：   上源码 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坐标，根据差值来改变整个卡片的位置。 这里有一个细节，为了防止按钮的点击干扰到卡片主部分的滑动