var _____WB$wombat$assign$function_____ = function(name) {return (self._wb_wombat && self._wb_wombat.local_init && self._wb_wombat.local_init(name)) || self[name]; }; if (!self.__WB_pmw) { self.__WB_pmw = function(obj) { this.__WB_source = obj; return this; } } { let window = _____WB$wombat$assign$function_____("window"); let self = _____WB$wombat$assign$function_____("self"); let document = _____WB$wombat$assign$function_____("document"); let location = _____WB$wombat$assign$function_____("location"); let top = _____WB$wombat$assign$function_____("top"); let parent = _____WB$wombat$assign$function_____("parent"); let frames = _____WB$wombat$assign$function_____("frames"); let opener = _____WB$wombat$assign$function_____("opener"); //电脑版和手机版通用. //经测试:touchstart、touchmove、touchend 三个事件在电脑版上的浏览器都不会执行,已测试microsoft Edge、IE、firefox、chrome、360安全浏览器、360极速浏览器、safari。 $k.dragMode = { any: 1, h: 2, v: 3, hOrv:4 }; $k.fn.draggable = function (config) { var obj = function (selector, config) { this.selector = selector; this.config = $.extendEx({}, this.defConfig, config); } obj.prototype.defConfig = { dragMode: $k.dragMode.any }; obj.prototype.draggable = function () { var _obj = this; var target; if (_obj.config.target) { target = _obj.selector.find(_obj.config.target); } else { target = _obj.selector; } var cursor = target.css('cursor'); if (cursor=='auto') { target.css('cursor', 'move'); } $(target).mousedown(function (e, e1) {//电脑版.eTrigger:jquery trigger方法传递过来的参数. //alert(_obj.selector[0].id); if (!e.originalEvent) { e = e1; } //alert(e.pageX); //alert(e2); _obj.dragState = { preX: e.pageX, preY: e.pageY }; _obj.dragState.startX = _obj.dragState.preX; _obj.dragState.startY = _obj.dragState.preY; _obj.dragState.isMouseDown = true; _obj.dragState.dragMode = _obj.config.dragMode; if (_obj.config.onMoveStart) { var ret = _obj.config.onMoveStart(_obj, e); if (ret == undefined) { ret = false; } return ret; } return false; }); $(target).on('touchstart', function (e, e1,e2) {//手机版 if (!e.originalEvent) { e = e2; } _obj.dragState = { preX: e.originalEvent.touches[0].pageX, preY: e.originalEvent.touches[0].pageY }; _obj.dragState.startX = _obj.dragState.preX; _obj.dragState.startY = _obj.dragState.preY; _obj.dragState.isMouseDown = true; _obj.dragState.dragMode = _obj.config.dragMode; if (_obj.config.onMoveStart) { var ret = _obj.config.onMoveStart(_obj, e.originalEvent.touches[0], e); if (ret==undefined) { ret = true; } return ret; } return true;//如果返回false那么将无法实现点击,click没有反应. }); $(document).mousemove(function (e) {//电脑版 if (!_obj.dragState || !_obj.dragState.isMouseDown) { return true; } //alert(_obj.selector[0].outerHTML); var cssLeft = _obj.selector.css('left'); var cssTop = _obj.selector.css('top'); var left = cssLeft.substr(0, cssLeft.length - 2); left = parseFloat(left); var top = cssTop.substr(0, cssTop.length - 2); top = parseFloat(top); if (_obj.dragState.dragMode == $k.dragMode.hOrv) { if (Math.abs(e.pageX - _obj.dragState.startX) > 29) {//30px:这个数据参考jquery mobile的swipLeft事件,因此较合理 _obj.dragState.dragMode = $k.dragMode.h; } else if (Math.abs(e.pageY - _obj.dragState.startY) > 29) {//30px:这个数据参考jquery mobile的swipRight事件,因此较合理 _obj.dragState.dragMode = $k.dragMode.v; } } if (_obj.dragState.dragMode == $k.dragMode.any || _obj.dragState.dragMode == $k.dragMode.h) { _obj.dragState.hOffsetDirection = (e.pageX - _obj.dragState.startX) > 0 ? 'right' : 'left'; _obj.dragState.hMoveDirection = (e.pageX - _obj.dragState.preX) > 0 ? 'right' : 'left'; } if (_obj.dragState.dragMode == $k.dragMode.any || _obj.dragState.dragMode == $k.dragMode.v) { _obj.dragState.vOffsetDirection = (e.pageY - _obj.dragState.startY) > 0 ? 'down' : 'up'; _obj.dragState.vMoveDirection = (e.pageY - _obj.dragState.preY) > 0 ? 'down' : 'up'; } var onMoveResult = { h: true, v: true,ret:false }; if (_obj.config.onMove) { onMoveResult = _obj.config.onMove(_obj, e); if (!onMoveResult) { onMoveResult = { h: true, v: true, ret: false }; } } if ((_obj.dragState.dragMode == $k.dragMode.any || _obj.dragState.dragMode == $k.dragMode.h) && onMoveResult.h) { _obj.selector.css('left', left + (e.pageX - _obj.dragState.preX)); } if ((_obj.dragState.dragMode == $k.dragMode.any || _obj.dragState.dragMode == $k.dragMode.v) && onMoveResult.v) { _obj.selector.css('top', top + (e.pageY - _obj.dragState.preY)); } _obj.dragState.preX = e.pageX; _obj.dragState.preY = e.pageY; var ret = onMoveResult.ret; if (ret == undefined) { ret = false; } return ret; //return false; }); $(document).on('touchmove', function (e) {//手机版 if (_obj.dragState && _obj.dragState.isMouseDown) { e.preventDefault();//阻止滚动条滚动或切换页面. } if (!_obj.dragState || !_obj.dragState.isMouseDown) { return true; } //在手机uc浏览器上,如果没有设置left和top,则值是auto. var cssLeft = _obj.selector.css('left'); if (cssLeft == 'auto') { cssLeft = '0px'; } var cssTop = _obj.selector.css('top'); if (cssTop == 'auto') { cssTop = '0px'; } var left = cssLeft.substr(0, cssLeft.length - 2); left = parseFloat(left); var top = cssTop.substr(0, cssTop.length - 2); top = parseFloat(top); if (_obj.dragState.dragMode == $k.dragMode.hOrv) { if (Math.abs(e.originalEvent.changedTouches[0].pageX - _obj.dragState.startX) > 29) {//30px:这个数据参考jquery mobile的swipLeft事件,因此较合理 _obj.dragState.dragMode = $k.dragMode.h; } else if (Math.abs(e.originalEvent.changedTouches[0].pageY - _obj.dragState.startY) > 29) {//30px:这个数据参考jquery mobile的swipRight事件,因此较合理 _obj.dragState.dragMode = $k.dragMode.v; } } if (_obj.dragState.dragMode == $k.dragMode.any || _obj.dragState.dragMode == $k.dragMode.h) { _obj.dragState.hOffsetDirection = (e.originalEvent.changedTouches[0].pageX - _obj.dragState.startX) > 0 ? 'right' : 'left'; _obj.dragState.hMoveDirection = (e.originalEvent.changedTouches[0].pageX - _obj.dragState.preX) > 0 ? 'right' : 'left'; } if (_obj.dragState.dragMode == $k.dragMode.any || _obj.dragState.dragMode == $k.dragMode.v) { _obj.dragState.vOffsetDirection = (e.originalEvent.changedTouches[0].pageY - _obj.dragState.startY) > 0 ? 'down' : 'up'; _obj.dragState.vMoveDirection = (e.originalEvent.changedTouches[0].pageY - _obj.dragState.preY) > 0 ? 'down' : 'up'; } var onMoveResult = { h: true, v: true, ret: false }; if (_obj.config.onMove) { onMoveResult = _obj.config.onMove(_obj, e.originalEvent.changedTouches[0], e); if (!onMoveResult) { onMoveResult = { h: true, v: true, ret: false }; } } if ((_obj.dragState.dragMode == $k.dragMode.any || _obj.dragState.dragMode == $k.dragMode.h) && onMoveResult.h) { _obj.selector.css('left', left + (e.originalEvent.changedTouches[0].pageX - _obj.dragState.preX)); } if ((_obj.dragState.dragMode == $k.dragMode.any || _obj.dragState.dragMode == $k.dragMode.v) && onMoveResult.v) { _obj.selector.css('top', top + (e.originalEvent.changedTouches[0].pageY - _obj.dragState.preY)); } _obj.dragState.preX = e.originalEvent.changedTouches[0].pageX; _obj.dragState.preY = e.originalEvent.changedTouches[0].pageY; var ret = onMoveResult.ret; if (ret == undefined) { ret = false; } return ret; //return false; }); $(document).mouseup(function (e) {//电脑版 var ret=undefined; if (_obj.dragState && _obj.dragState.isMouseDown && _obj.config.onMoveEnd) { ret = _obj.config.onMoveEnd(_obj, e); } if (_obj.dragState) { _obj.dragState.isMouseDown = false; } if(ret!=undefined) { return ret; } }); $(document).on('touchend', function (e) {//手机版 var ret = undefined; if (_obj.dragState && _obj.dragState.isMouseDown && _obj.config.onMoveEnd) { ret = _obj.config.onMoveEnd(_obj, e.originalEvent.changedTouches[0], e); } if (_obj.dragState) { _obj.dragState.isMouseDown = false; } if (ret != undefined) { return ret; } }); } var _obj = new obj($(this.jo), config || {}); _obj.draggable(); return _obj; }; }