手机 html5 hammer drag widget,javascript – HTML5使用Hammer.js拖放事件拖放div上的元素

Hammer.js事件只有在先前被绑定时才能被捕获.

尝试使用case语句…(这是我最近建立的一个应用程序)我可以判断语句然后中断或返回false等以防止事情发生.从理论上讲,如果我解除绑定或排除事件“拖动”,它应该仍然有效.

var hammertime = Hammer(document.getElementById('image-wrapper'), {

transform_always_block: true,

transform_min_scale: window.initScale,

transform_max_scale: 1,

drag_block_horizontal: true,

drag_block_vertical: true,

drag_min_distance: 0

});

//console.log(hammertime);

var posX = window.calcLeft, posY = window.calcTop,

lastPosX = window.calcLeft, lastPosY = window.calcTop,

bufferX = 0, bufferY = 0,

scale = window.initScale, last_scale,

rotation = window.rotationNeeded, last_rotation, dragReady = 0;

hammertime.on('touch drag dragend transform release mouseleave transformend pinchin pinchout', function (ev) {

elemRect = document.getElementById('the-image');

manageMultitouch(ev);

});

function manageMultitouch(ev) {

var pinchDirection;

ev.stopPropagation();

//console.log(ev.type);

switch (ev.type) {

case 'touch':

last_scale = scale;

last_rotation = rotation;

break;

case 'drag':

posX = ev.gesture.deltaX + lastPosX;

posY = ev.gesture.deltaY + lastPosY;

break;

case 'pinchin':

console.log('pinchin');

pinchDirection = "in";

break;

case 'pinchout':

console.log('pinchout');

pinchDirection = "out";

break;

case 'transform':

rotation = window.rotationNeeded;// rotation + ev.gesture.rotation;//we can change this to snap rotation eventually.

//console.log('Last Scale: ', last_scale);

scale = Math.max(hammertime.options.transform_min_scale, Math.min(last_scale * ev.gesture.scale, 1));

var propsImage = document.getElementById('the-image').getBoundingClientRect();

//console.log(propsImage);

var propsBox = document.getElementById('image-wrapper').getBoundingClientRect();

//console.log(propsBox);

break;

case 'transformend':

console.log('We are finished transforming.');

//when they finish transforming, we need to determinw what the new left reset position would be.

var propsImage = document.getElementById('the-image').getBoundingClientRect();

var propsBox = document.getElementById('image-wrapper').getBoundingClientRect();

//window.calcLeft = Math.round(window.preBounds.left - propsImage.left);

//console.log(ev.type);

//if (pinchDirection = "out") {

window.calcLeft = Math.round(window.calcLeft + ((propsImage.width - propsBox.width) / 2));

//} else if (pinchDirection = "in") {

//window.calcLeft = Math.round(window.calcLeft - ((propsImage.width - propsBox.width) / 2));

//}

//window.calcTop = Math.round(window.calcTop + ((propsImage.top - propsBox.top) / 2));

//console.log(window.calcLeft);

break;

case 'dragend':

//console.log('We are finished dragging.');

//console.log(window.calcLeft);

lastPosX = posX;

lastPosY = posY;

checkBounds();

break;

case 'mouseleave':

//console.log('Release!', posX, posY);

//checkBounds();

break;

}