Вопрос:
У меня есть функция, которая позволяет мне что-то перетаскивать. Мои js:
$(function() { $( svgcanv ).css(‘cursor’, ‘-moz-grab’); var leftButtonDown = false; $(document).mousedown(function(e){ console.log(‘pressed’); // Left mouse button was pressed, set flag if(e.which === 1) leftButtonDown = 1; }); $(document).mouseup(function(e){ console.log(‘released’); // Left mouse button was released, clear flag leftButtonDown = 0; $( svgcanv ).css(‘cursor’, ‘-moz-grab’); firstDragCanvas = 1; }); $( mainGroup ).mousemove(function(e){ if (leftButtonDown == 1) { $( svgcanv ).css(‘cursor’, ‘-moz-grabbing’); var posX = e.pageX; var posY = e.pageY; if (firstDragCanvas == 0) { posX = e.pageX — canvasPosX; posY = e.pageY — canvasPosY; } else { canvasPosX = e.pageX — translateX; canvasPosY = e.pageY — translateY; posX = translateX; posY = translateY; firstDragCanvas = 0; } if (posX > 0) posX = 0; if (posX < -canvasWidth + $(«#holder»).width()) posX = -canvasWidth + $(«#holder»).width(); translateX = posX; translateY = posY; mainGroup.setAttribute(«transform»,»translate(«+posX+»,»+posY+») scale(«+currentZoomLevel+»)»); } }); });
Проблема заключается в том, что событие mouseup не всегда запускается. Остальные 2 отлично работают. Первый раз, когда я двигаюсь, все работает нормально. Но во-вторых, если я нажимаю и ташу сразу, мышь не запускается. Если я перестаю перетаскивать, нажмите где-нибудь, а затем снова перетяните script снова.
Моя консоль (с двумя перетаскиваниями, затем нажмите и снова перетащите. обратите внимание на две последовательные “нажатые” строки – занесенные в журнал):
И нет… это SVG и нужно перетащить внутрь, поэтому нельзя использовать jQuery draggable.
Лучший ответ:
Попробуйте добавить e.preventDefault(); в каждый, чтобы предотвратить любое действие UA по умолчанию.
например.
$(document).mousedown(function(e){ e.preventDefault(); console.log(‘pressed’); // Left mouse button was pressed, set flag if(e.which === 1) leftButtonDown = 1; });
и т.д.
