Я знаю, что это старый вопрос, я пришел сюда с этого другого вопроса , который был помечен как дубликат этого, и хотел добавить возможное решение, которое не требует jQuery или каких-либо библиотек и это работает во всех основных браузерах. Он основан на этом учебном пособии , рекомендованном @ AmirHossein Mehrvarzi .
Это небольшое решение не использует события перетаскивания, только mousedown, mouseup и mousemove. Вот как это работает:
- Когда мышь находится над прямоугольником, она сохраняет положение мыши и активный элемент.
- Когда мышь перемещается, координаты прямоугольника обновляются с новой позицией мыши.
- Когда мышь поднята, она сбрасывает активный элемент.
Из кода в вопросе выше:
var selectedElement = null;
var currentX = 0;
var currentY = 0;
$(document).ready(function() {
function handleDragStart(e) {
log("handleDragStart");
this.style.opacity = '0.4'; // this ==> e.target is the source node.
};
var registercb = function () {
$("#cvs > rect").mousedown(function (e) {
// save the original values when the user clicks on the element
currentX = e.clientX;
currentY = e.clientY;
selectedElement = e.target;
}).mousemove(function (e) {
// if there is an active element, move it around by updating its coordinates
if (selectedElement) {
var dx = parseInt(selectedElement.getAttribute("x")) + e.clientX - currentX;
var dy = parseInt(selectedElement.getAttribute("y")) + e.clientY - currentY;
currentX = e.clientX;
currentY = e.clientY;
selectedElement.setAttribute("x", dx);
selectedElement.setAttribute("y", dy);
}
}).mouseup(function (e) {
// deactivate element when the mouse is up
selectedElement = null;
});
};
function log() {
if (window.console && window.console.log)
window.console.log('[XXX] ' + Array.prototype.join.call(arguments, ' '));
};
registercb();
});
rect { cursor: move; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>SVG/HTML 5 Example</h1>
<svg id="cvs">
<rect x="0" y="10" width="100" height="80" fill="#69c" />
<rect x="50" y="50" width="90" height="50" fill="#c66" />
</svg>
Вы также можете увидеть это на этом JSFiddle: http://jsfiddle.net/YNReB/61/
Если вы хотите добавить функцию перетаскивания, вы можете изменить функцию mouseup, чтобы она считывала элемент в позиции курсора (с помощью document.elementFromPoint(e.clientX, e.clientY)), а затем вы можете выполнять действия с исходным элементом и тем, где он был отброшен. .