Jquery UI droppable's hoverClass in not firing in mobile device -
i using jquery ui draggable , droppable achieve output http://www.casetify.com/design. here link of page. working expected in desktop width, not working in mobile emulation/device.
on 3rd step of page, when image dragged sidebar mobile cover, droppable's hoverclass fired. hoverclass not getting fired in mobile emulation/device. gets fired when mouse pointed in bottom right of droppable area. below code draggable , droppable element.
$('#image-pool-list img.dddraggable').draggable({ revert: "invalid", helper: "clone", //appendto: "body", //zindex: 100, live: true, refreshpositions: true, drag: function(event, ui) { $(ui.helper).css('opacity', '0.5'); $('div.design-template').css('opacity', '1'); ui.helper.css({ 'width': '90px', 'height': '90px' }); //console.log(ui.helper); }, stop: function(event, ui) { //$('div.design-template').css('opacity','0.2'); } }); $("div#template div.design-template div.placeholder").droppable({ hoverclass: "drop-hover", tolerance: 'fit', });
so please let me know, how hoverclass triggered in mobile emulation/device if mouse pointer in center poistion.
suppose problem not hoverclass actual problem scalefactor.
$('#image-pool-list img.dddraggable').droppable({ revert: "invalid", helper: "clone", live: true, refreshpositions: true, start: function( event, ui ) { scalefactor = 0.6; click.x = event.clientx; click.y = event.clienty; }, drag: function( event, ui ) { $(ui.helper).css('opacity','0.5'); $('div.design-template').css('opacity','1'); var zoom = 0.6; var original = ui.originalposition; ui.position = { left: (event.clientx - click.x + original.left) / zoom, top: (event.clienty - click.y + original.top ) / zoom }; }, stop: function( event, ui ) { $('div.design-template').css('opacity','0.2'); click.x = 0; click.y = 0; } });
Comments
Post a Comment