一、使用注册指令
directives: {
drag ( el) {
let oDiv = el
oDiv. onmousedown = function ( e) {
let disX = e. clientX - oDiv. offsetLeft
let disY = e. clientY - oDiv. offsetTop
document. onmousemove = function ( e) {
let l = e. clientX - disX
let t = e. clientY - disY
if ( l < 0 ) {
l = 0
}
if ( l > document. documentElement. clientWidth - oDiv. getBoundingClientRect ( ) . width) {
l = document. documentElement. clientWidth - oDiv. getBoundingClientRect ( ) . width
}
console. log ( document. documentElement. clientWidth)
if ( t < 0 ) {
t = 0
}
if ( t > document. documentElement. clientHeight - ( oDiv. offsetHeight - 400 ) ) {
t = document. documentElement. clientHeight - ( oDiv. offsetHeight - 400 )
}
if ( t > document. body. clientHeight - oDiv. getBoundingClientRect ( ) . height) {
t = 0
}
oDiv. style. left = l + 'px'
oDiv. style. top = t + 'px'
}
document. onmouseup = function ( e) {
document. onmousemove = null
document. onmouseup = null
}
}
} ,
} ,
二、使用Tdrag
插件地址:http: / / www. jq22. com/ jquery- info8362
Tdrag属于拖拽类的一款插件,基于jquery而成,兼容1.4以上版本的jquery,兼容浏览器:chrome、firfox、IE7等以上主流浏览器
引入
import $ from 'jquery'
import '@/plugins/Tdrag/Tdrag'
使用 初始值: var call = { scope: null,//父级 grid: null,//网格 axis:“all”,//上下或者左右 pos:false,//是否记住位置 handle:null,//手柄 moveClass:“tezml”,//移动时不换位加的class dragChange:false,//是否开启拖拽换位 changeMode:“point”,//point & sort cbStart:function(){},//移动前的回调函数 cbMove:function(){},//移动中的回调函数 cbEnd:function(){},//移动结束时候的回调函数 random:false,//是否自动随机排序 randomInput:null,//点击随机排序的按钮 animation_options:{//运动时的参数 duration:800,//每次运动的时间 easing:“ease-out”//移动时的特效,ease-out、ease-in、linear }, disable:false,//禁止拖拽 disableInput:null//禁止拖拽的按钮 };
$ ( document) . ready ( ( ) => {
for ( var i = 1 ; i <= this . intercomBoxDatas. length; i++ ) {
var css = {
left: ( Math. ceil ( ( i) % 5.1 ) - 1 ) * 19 + 4 + '%' ,
top: ( Math. ceil ( ( i + 1 ) / 6.1 ) - 1 ) * 200 + 20
}
var a = '#intercomBox' + i
var b = '#intercomBox-up' + i
$ ( a) . Tdrag ( {
scope: '.intercomBoxContainer' ,
handle: b,
}
)
$ ( a) . css ( css)
}
} )
三、 效果如下: