Search the Community

Hi First post. I just updated to latest and greatest (2.1.1), i read in the release notes that dragClickables is default true by now. Cool I though, I already had that to true. But after updating the drags no longer work (on chrome 72) when starting on a clickable (<a>). Reverted back to 2.0.2 and they work again. //Andreas

I'm having an issue with the draggable plugin on our new website. It was working before and I can't seem to work out what has changed. I found a few topics but the resolutions didn't appear to be relevant to my situation. The website is https://www.britishwebsites.co.uk - A user can drag the map around and I'd like for the entire map to be draggable (including the landmarks/links). I've also got a click event on the links (added using jQuery) to override standard functionality using event.preventDefault(); On desktops and iOS devices the behaviour is as expected, however on Android you have to long tap or tap lots of times in quick succession to trigger the click event and show a category. I'd prefer not to rework the functions to work with the touchstart/mousedown and touchend/mouseup events while manually detecting the amount the map has moved, but wondered if this is the only solution? I cannot seem to isolate another issue and there are no touch events with preventDefault or stopPropagation applied. This is my config for initialising draggable: var draggableConfig = { type:"x,y", edgeResistance:0.75, bounds:map.elems.$mapBar[0], //trigger:map.elems.$mapCanvas[0], throwProps:true, zIndexBoost:false, dragClickables:true, onThrowUpdate:map.update, onDrag:map.update, onDragStart:function(){ map.updateMessageSequence(true); if(map.lastDragTime === false){ map.dragStartTime = new Date().getTime(); } }, cursor:map.customCursor ? "none" : "move", force3D:true, overshootTolerance:0.2 }; this.draggableInstance = Draggable.create(map.elems.$mapCanvas[0], draggableConfig); this.update.call(this.draggableInstance[0]); The click event for the links which I've tried applying both before and after initialising Draggable: map.elems.$clickable.on("click",function(e){ e.preventDefault(); var category = $(this).attr("href"); woopra.track("mapClick", {category:category}); ga('send', 'event', 'Map', 'Click', category); mapCats.changeCatState(category); }); The only other code I believe may be relevant is the touch events on the SVG shapes overlaying the map: svgMouseEvent:function(e){ e.preventDefault(); var $area = $(this); switch(e.type){ case "mouseover": case "touchstart": if(map.customCursor){ map.elems.$cursor.addClass("finger"); } $area.data("$matchingLandmark").data("mouseover",true); new TweenLite.to($area.data("$matchingLandmark")[0],0.5,{autoAlpha:1}); new TweenLite.to($area.data("$matchingLandmark").data("$labelEl")[0],0.5,{autoAlpha:1}); break; case "mouseout": case "touchend": if(map.customCursor){ map.elems.$cursor.removeClass("finger"); } $area.data("$matchingLandmark").data("mouseover","tween"); map.update.call(map.draggableInstance[0]); break; } } Thank you in advance if any help can be offered.

Hello everybody I'm working on a media gallery that uses Draggable ('rotation') to navigate. It is has many dependencies. Therefore it's hard to reproduce a simple codepen version. But perhaps the problem rings any bells here: Firefox refuses to handle clicks/touches correctly inside the Draggable and its sub-elements. It is ONLY FIREFOX - on all platforms. I never thought I would ever say this but: “Even IE works fine!”. My desired Draggable settings are: a. dragClickables:true, b. allowEventDefault:false, I get a <button> element work when I change a or b or both. Whereas <button data-clickable =”true”> does not help at all. Whatever I do, the controls of a nested <video> never work in Firefox. Although the video works. It can be started with a right-click. It is only the 'click' event. All other events work (rollover, mousedown...). Even the 'click' partly works. An addEventListener ('click', funct) fires. But at the same time the CSS :active is ignored. The script works like a charm in all other target browsers. Even on the iPhone the videos (or better their stills) smoothly rotate and you can open them. When I disable( ) Draggable all comes back to life again. Has anyone ever experienced this kind of trouble in Firefox? Any hint is very appreciated.