javascript - HTML5 drag and drop element over div with Hammer.js drag events -

javascript - HTML5 drag and drop element over div with Hammer.js drag events -

tl;dr

i want utilize html5 drag , drop of element container drag hammer.js events. however, there conflicts.

detailed description:

as presented in attached figure, have 2 containers:

left: container draggable elements right: container hammer.js events, namely drag, dragstart , dragend.

i want drag , drop elements left container right one. however, while dragging, when entering on right container, hammer.js dragstart event activated. after dropping element, apply drag event on right container. however, hammer.js drag event activated , considers deltax , deltay previous dragstart event.

hammer.js beingness used preventdefault: true:

hammer(this.container, {preventdefault: true}).on('dragstart', function (event) { ... }

i have used event.preventdefault() , event.stoppropagation() on dragstart of draggable element, without success.

i have partially solved problem. in dragstart event of hammer.js container, have added next verification, in order check if source element , target same. however, drag in right container works on sec action, since first 1 ignored.

if (event.gesture.startevent.srcevent.srcelement != event.gesture.target) { homecoming false; }

any thought on how prevent hammer.js events while dragging elements using html5 drag , drop api?

i want utilize flags lastly resort, since hammer.js events should developed third-parties.

thanks help.

hammer.js events should captured if have been bound.

try using case statement...(this app built recently) can case statement break out or homecoming false etc prevent things. theoretically though, if unbind or exclude event "drag" should work anyway.

<script> 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 alter 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 finished transforming.'); //when finish transforming, need determinw new left reset position 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 finished dragging.'); //console.log(window.calcleft); lastposx = posx; lastposy = posy; checkbounds(); break; case 'mouseleave': //console.log('release!', posx, posy); //checkbounds(); break; } <script>

javascript jquery html5 drag-and-drop hammer.js