javascript: перетаскивание +svg графика
В программе есть модуль drag.js который отвечает за перетаскивание элементов на экране по событию мыши onmousedown="drag(this, event);" тоесть к любому элементу которому можна добавить событие onmousedown будет перетаскиваться.
Для проверки вставляю:
1.зарисованый контейнер div-перетаскиваеться в ОПЕРА,ХРОМ,ИЕ.
2.элемент img с рисуноком .png-перетаскиваеться в ОПЕРА,ХРОМ,ИЕ.
3.элемент embed с сылкой на рисунок svg-не перетаскиваеться в ОПЕРА,ХРОМ , так как ИЕ не поддерживает svg графику, то его не видно но пустая рамка перетаскиваеться !
Мои предположения или 1.броузеры не могут перетянуть svg потому что в svg файле символьные команды используют координаты типа : с точки А провести линию в точку Б и поэтому файл жестко привязан.
2. или тег embed в броузерах ОПЕРА,ХРОМ не поддерживает событие оnmousedown.
Подскажите правильное направление?
Для проверки вставляю:
1.зарисованый контейнер div-перетаскиваеться в ОПЕРА,ХРОМ,ИЕ.
2.элемент img с рисуноком .png-перетаскиваеться в ОПЕРА,ХРОМ,ИЕ.
3.элемент embed с сылкой на рисунок svg-не перетаскиваеться в ОПЕРА,ХРОМ , так как ИЕ не поддерживает svg графику, то его не видно но пустая рамка перетаскиваеться !
Мои предположения или 1.броузеры не могут перетянуть svg потому что в svg файле символьные команды используют координаты типа : с точки А провести линию в точку Б и поэтому файл жестко привязан.
2. или тег embed в броузерах ОПЕРА,ХРОМ не поддерживает событие оnmousedown.
Подскажите правильное направление?
function drag(elementToDrag, event) {
var startX = event.clientX, startY = event.clientY;
var origX = elementToDrag.offsetLeft, origY = elementToDrag.offsetTop;
var deltaX = startX - origX, deltaY = startY - origY;
if (document.addEventListener) {
document.addEventListener("mousemove", moveHandler, true);
document.addEventListener("mouseup", upHandler, true);
}
else if (document.attachEvent) {
elementToDrag.setCapture();
elementToDrag.attachEvent("onmousemove", moveHandler);
elementToDrag.attachEvent("onmouseup", upHandler);
elementToDrag.attachEvent("onlosecapture", upHandler);
}
else {
var oldmovehandler = document.onmousemove;
var olduphandler = document.onmouseup;
document.onmousemove = moveHandler;
document.onmouseup = upHandler;
}
if (event.stopPropagation) event.stopPropagation();
else event.cancelBubble = true;
if (event.preventDefault) event.preventDefault();
else event.returnValue = false;
function moveHandler(e) {
if (!e) e = window.event;
elementToDrag.style.left = (e.clientX - deltaX) + "px";
elementToDrag.style.top = (e.clientY - deltaY) + "px";
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
}
function upHandler(e) {
if (!e) e = window.event;
if (document.removeEventListener) {
document.removeEventListener("mouseup", upHandler, true);
document.removeEventListener("mousemove", moveHandler, true);
}
else if (document.detachEvent) {
elementToDrag.detachEvent("onlosecapture", upHandler);
elementToDrag.detachEvent("onmouseup", upHandler);
elementToDrag.detachEvent("onmousemove", moveHandler);
elementToDrag.releaseCapture();
}
else {
document.onmouseup = olduphandler;
document.onmousemove = oldmovehandler;
}
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
}
}
var startX = event.clientX, startY = event.clientY;
var origX = elementToDrag.offsetLeft, origY = elementToDrag.offsetTop;
var deltaX = startX - origX, deltaY = startY - origY;
if (document.addEventListener) {
document.addEventListener("mousemove", moveHandler, true);
document.addEventListener("mouseup", upHandler, true);
}
else if (document.attachEvent) {
elementToDrag.setCapture();
elementToDrag.attachEvent("onmousemove", moveHandler);
elementToDrag.attachEvent("onmouseup", upHandler);
elementToDrag.attachEvent("onlosecapture", upHandler);
}
else {
var oldmovehandler = document.onmousemove;
var olduphandler = document.onmouseup;
document.onmousemove = moveHandler;
document.onmouseup = upHandler;
}
if (event.stopPropagation) event.stopPropagation();
else event.cancelBubble = true;
if (event.preventDefault) event.preventDefault();
else event.returnValue = false;
function moveHandler(e) {
if (!e) e = window.event;
elementToDrag.style.left = (e.clientX - deltaX) + "px";
elementToDrag.style.top = (e.clientY - deltaY) + "px";
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
}
function upHandler(e) {
if (!e) e = window.event;
if (document.removeEventListener) {
document.removeEventListener("mouseup", upHandler, true);
document.removeEventListener("mousemove", moveHandler, true);
}
else if (document.detachEvent) {
elementToDrag.detachEvent("onlosecapture", upHandler);
elementToDrag.detachEvent("onmouseup", upHandler);
elementToDrag.detachEvent("onmousemove", moveHandler);
elementToDrag.releaseCapture();
}
else {
document.onmouseup = olduphandler;
document.onmousemove = oldmovehandler;
}
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
}
}
Не знаю, что там у вас с SVG, но скриптик ваш я возьму, спасибо.
В html
<!--ЗАРИСОВАННЫЙ КОНТЕЙНЕР-ПЕРЕТАСКИВАЕТЬСЯ-->
<div class="drag red" style="left: 230px;" onmousedown="drag(this, event);">B</div>
<!--файл svg-НЕ ПЕРЕТАСКИВАЕТЬСЯ-->
<embed class="svg" src="first.svg"
style="position:absolute;left:250px; top:200px;"
onmousedown="drag(this, event);"
type="image/svg+xml"></embed>
<!--ЗАРИСОВАННЫЙ КОНТЕЙНЕР-ПЕРЕТАСКИВАЕТЬСЯ-->
<div class="drag red" style="left: 230px;" onmousedown="drag(this, event);">B</div>
<!--файл svg-НЕ ПЕРЕТАСКИВАЕТЬСЯ-->
<embed class="svg" src="first.svg"
style="position:absolute;left:250px; top:200px;"
onmousedown="drag(this, event);"
type="image/svg+xml"></embed>
Попробуйте "накрыть" сверху svg еще одним слоем. Возможно события не передаются по иерархии DOM вверх. Такое бывает порой
