hongze_yb_xcx/components/chartList/drag.wxs

var row_Height = 0;			//行高
var scrollOffsetTop = 0;	//滚动条位置
var isAppH5 = false;		//是否APPH5端
var isLongTouch = false;	//是否开启长按
var longTouchTime = 350;	//触发长安事件事件
var isMove = false;			//是否可拖动
var touchTimer=false;		//长按事件定时器
function scroll(event,instance){
	scrollOffsetTop = event.detail.scrollTop;
}
function touchstart(event, instance) {
	isMove = false;
	if(row_Height==0){
		var rowStyle = event.instance.getComputedStyle(['height']);
		row_Height = parseInt(rowStyle.height);//获取行高
		console.log(rowStyle.height)
	}
	var rowData = event.instance.getDataset();
	var rowtype = rowData.type == "A" ? "B" : "A";
	//重置样式
	resetRowStyle(state, instance, rowtype);
	var state = instance.getState();
	if (event.touches.length == 1) {
		state.point = event.touches[0];
		state.initscrollOffsetTop = scrollOffsetTop;
		state.islongTap = true;
		state.rowData = rowData;
		//读取数据
		var dataViewDOM = instance.selectComponent('#dataView');
		var viewData = dataViewDOM.getDataset();
		isAppH5 = viewData.isapph5&&JSON.parse(viewData.isapph5);
		isLongTouch = viewData.islongtouch&&JSON.parse(viewData.islongtouch);
		longTouchTime = parseInt(viewData.longtouchtime);
		state.rowData.rownum = viewData.rownum;
		state.rowData.listheight = viewData.listheight;
	}
	
	// 计算shadowRow.style.top
	var rowIndex = parseInt(rowData.index);
	var shadowRowTop = rowIndex*row_Height;
	shadowRowTop = shadowRowTop - scrollOffsetTop;
	// 加载shadowRow数据
	instance.callMethod("loadShadowRow", {rowIndex : rowIndex,shadowRowTop:shadowRowTop});
	state.shadowRowTop = shadowRowTop;
	var shadowBoxComponent = instance.selectComponent('#shadowRowBox');
	shadowBoxComponent.setStyle({'top': shadowRowTop + 'px'})
	//长按事件
	if(isLongTouch){
		if(typeof setTimeout !== "undefined"){
			touchTimer && clearTimeout(touchTimer);
			touchTimer = setTimeout(function(){
				longpress(event,instance);
			},longTouchTime)
		}
	}
}
function longpress(event,instance){
	if(isLongTouch){
		isMove = true;
		moveRow(instance, 0)
	}
}
function touchmove(event, instance) {
	
	var state = instance.getState();
	var rowData = event.instance.getDataset(); 
	var movePoint = event.touches[0];
	var initPoint = state.point;
	var moveY = movePoint.pageY - initPoint.pageY;	
	//xy
	var moveX=movePoint.pageX-initPoint.pageX



	if(isLongTouch){
		if(typeof setTimeout !== "undefined" && Math.abs(moveY)>10){
			clearTimeout(touchTimer);
		}
		if (!isMove) {
			return ;
		}
	}
	moveRow(instance, moveY,moveX);
	//阻止滚动页面
	if(event.preventDefault){
		event.preventDefault();
	}
	return false;
}

function touchend(event, instance) {
	if(isLongTouch && typeof setTimeout !== "undefined"){
		clearTimeout(touchTimer);
	}
	
	if(lastCommand!="stop"){
		lastCommand = "stop";
		instance.callMethod("pageScroll", {'command':"stop"});
	}
	var state = instance.getState();
	var rowtype = state.rowData.type;
	
	if (typeof state.offset !== "undefined" && state.rowData.index != state.offset && state.offset != null) {
		instance.callMethod("sort", {
			index: state.rowData.index,
			offset: state.offset
		});
	} else {
		resetRowStyle(state, instance, rowtype);
		resetShadowRowStyle(instance)
		feedbackGenerator(instance); //震动反馈
		return false;
	}
	resetShadowRowStyle(instance)
	typeof setTimeout !== "undefined" && setTimeout(function() {
		resetRowStyle(state, instance, rowtype);
	}, 500);
	state.offset = null;
	oldOffset = null;
	feedbackGenerator(instance); //震动反馈
	return false;
}

function resetRowStyle(state, instance, rowtype) {
	var blockList = instance.selectAllComponents('.row'+rowtype);
	for (var i = 0; i < blockList.length; i++) {
		blockList[i].setStyle({
			'height': row_Height+'px',
			'transform': 'none',
			'-webkit-transform': 'none'
			});
		blockList[i].removeClass('ani');
		blockList[i].removeClass('hide');
	}
}
function resetShadowRowStyle(instance) {
	var shadowBoxComponent = instance.selectComponent('#shadowRowBox');
	shadowBoxComponent.removeClass('show');
	shadowBoxComponent.setStyle({});
	shadowBoxComponent.removeClass('move');
}
var lastCommand = '';
// move Row 
function moveRow(instance, moveY,moveX) {
	var state = instance.getState();
	var initIndex = parseInt(state.rowData.index);
	var rowtype = state.rowData.type;
	//显示拖拽行Box
	var shadowBoxComponent = instance.selectComponent('#shadowRowBox');
	shadowBoxComponent.hasClass('show') || shadowBoxComponent.addClass('show');
	//隐藏列表对应行
	var rowDom = instance.selectComponent('#row' + rowtype + state.rowData.index);
	rowDom.hasClass('hide') || rowDom.addClass('hide');
	//拖动shadowRow
	var shadowRowDom = instance.selectComponent('#shadowRow');
	shadowRowDom.hasClass('move') || shadowRowDom.addClass('move');
	shadowRowDom.removeClass('ani');
	var style = {
		'transform': 'translateY(' + moveY + 'px) translateX('+ moveX +'px) translateZ(10px)',
		'-webkit-transform': 'translateY(' + moveY + 'px) translateX('+ moveX +'px) translateZ(10px)'
	}
	shadowRowDom.setStyle(style); 
	
	var listheight = state.rowData.listheight
	var listClientY = state.shadowRowTop + moveY;
	var tmpscrollListTop = scrollOffsetTop;
	// 拖拽至边缘滚动视图 距离顶部距离1.5行高触发上滚动 下滚动同理
	var callMethodData = {
		command:listClientY<row_Height*1.5?"up":listClientY>listheight-(row_Height*1.5)?"down":"stop",
		scrollTop:tmpscrollListTop,
	}
	//把滚动指令发给逻辑层
	if(lastCommand!=callMethodData.command){
		lastCommand = callMethodData.command;
		instance.callMethod("pageScroll", callMethodData);
	}
	
	var moveOffset = moveY + scrollOffsetTop - state.initscrollOffsetTop;
	var offset = calcOffset(initIndex, moveOffset);
	if(offset<=2 || offset>=state.rowData.rownum-2){
		callMethodData.command = 'stop';
	}
	//为保证体验，非APP和H5端，在滚动视图期间不进行位置交换
	if((!isAppH5) && callMethodData.command!='stop'){
		return;
	}
	oldOffset = oldOffset == null ? initIndex : oldOffset;
	if (offset < 0 || offset >= state.rowData.rownum) {
		return;
	}
	if (offset == oldOffset) {
		return;
	}
	
	oldOffset = offset;
	state.offset = offset;
	//触发change事件
	instance.callMethod("change", {
		index: state.rowData.index,
		moveTo: state.offset
	});
	feedbackGenerator(instance); //震动反馈
	//根据offset对行进行位置交换
	var blockList = instance.selectAllComponents('.row' + rowtype);
	for (var i = 0; i < blockList.length; i++) {
		if (i == initIndex) {
			continue;
		}
		var translateY = 0;
		if ((i >= offset && i < initIndex) || (i <= offset && i > initIndex)) {
			translateY = i < initIndex ? row_Height : -row_Height;
		}
		var style = {
			'height': row_Height+'px',
			'transform': 'translateY(' + translateY + 'px) translateZ(5px)',
			'-webkit-transform': 'translateY(' + translateY + 'px) translateZ(5px)'
		}
		blockList[i].hasClass('ani') || blockList[i].addClass('ani');
		blockList[i].setStyle(style);
	}
	
}
//计算偏移index
var oldOffset = null;
function calcOffset(initIndex, moveY) {
	var offset = initIndex + parseInt(moveY / row_Height); //偏移 行高的倍数
	var rest = moveY % row_Height;
	if (rest > 0) {
		offset = offset + (rest / row_Height >= 0.6 ? 1 : 0);
		if (offset < oldOffset) {
			offset = rest / row_Height <= 0.4 ? offset : oldOffset;
		}
	} else {
		offset = offset + (rest / row_Height <= -0.6 ? -1 : 0);
		if (offset > oldOffset) {
			offset = rest / row_Height >= -0.4 ? offset : oldOffset;
		}
	}
	return offset;
}

//触感反馈
//wxs 不支持条件编译，所以用此方法判断
var isiOSAPP = typeof plus != "undefined" && plus.os.name == 'iOS';
var UISelectionFeedbackGenerator;
var UIImpactFeedbackGenerator;
var impact

if (isiOSAPP) {
	UISelectionFeedbackGenerator = plus.ios.importClass("UISelectionFeedbackGenerator");
	impact = new UISelectionFeedbackGenerator();
	impact.init();
}

function feedbackGenerator(instance) {
	if (isiOSAPP) {
		impact.selectionChanged();
	} else {
		if (typeof plus != "undefined") {
			plus.device.vibrate(12)
		} else {
			instance.callMethod("vibrate");
		}
	}
}

module.exports = {
	scroll:scroll,
	longpress:longpress,
	touchstart: touchstart,
	touchmove: touchmove,
	touchend: touchend
}