Javascript 如何找到图像的原始位置？

我正在使用interact.js库实现拖放功能。我使用原始图像而不是div作为我的可拖动对象，这似乎很好：

<img id="drag4" src="images/SVG/ksTire.svg" class="draggable js-drag" style="width:85px">

我不知道如何在拖动开始之前将图像返回到其原始起点。我需要将原始坐标存储在js变量中，并根据特定事件将图像返回到其确切的原始起始位置。我在事件中尝试了各种x/y坐标，也尝试了getElementById，但没有成功。每当我尝试将图像返回到其原始位置时，某些方法会在第一次将其恢复，但当我再次开始拖动它时，它会远离一个陌生的位置，不再位于鼠标指针下

有没有人能提供一些示例代码，说明如何不断地将可拖动对象捕捉回其初始位置？我已经在代码中找到了调用它的位置，我所需要的只是如何将图像恢复到正确的位置，然后在发生这种情况后继续正常工作

注意：interact.js不是基于jquery构建的，所以在这种特殊情况下，我更喜欢非jquery解决方案

以下是my dropzone.js的全部内容，这是与此问题相关的大部分内容：

(function(interact) {

    'use strict';

    var transformProp;
    var startPos = null;
    var startX = 0;
    var startY = 0;
    var validDrop = false;

    interact.maxInteractions(Infinity);

    // setup draggable elements.


    /* block below was copied from https://github.com/taye/interact.js/issues/79 -- try to get this working */

    // setup drop areas.

    setupDropzone('#drop1', '#drag1, #drag2, #drag4');
    setupDropzone('#drop2', '#drag4');
    setupDropzone('#drop4', '#drag4');
    setupDropzone('#drop5', '#drag1, #drag2, #drag4');
    setupDropzone('#drop6', '#drag3');
    setupDropzone('#drop7', '#drag1');


    /* SNAP code was copied from http://kundprojekt.soonce.com/lintex/zonbuilder/ and https://github.com/taye/interact.js/issues/79 -- try to get this working */

    // dropzone #1 accepts draggable #1
    //setupDropzone('#drop1', '#drag1');
    // dropzone #2 accepts draggable #1 and #2
    //setupDropzone('#drop2', '#drag1, #drag2');
    // every dropzone accepts draggable #3
    //setupDropzone('.js-drop', '#drag3');

    /**
     * Setup a given element as a dropzone.
     *
     * @param {HTMLElement|String} el
     * @param {String} accept
     */
    function setupDropzone(el, accept) {
        interact(el)
            .dropzone({
                accept: accept,
                ondropactivate: function(event) {
                    addClass(event.relatedTarget, '-drop-possible');
                },
                ondropdeactivate: function(event) {
                    removeClass(event.relatedTarget, '-drop-possible');
                }
            })
            .snap({
                mode: 'anchor',
                anchors: [],
                range: Infinity,
                elementOrigin: {
                    x: 0.5,
                    y: 0.5
                },
                endOnly: true
            })
            .on('dropactivate', function(event) {
                var active = event.target.getAttribute('active') | 0;

                // change style if it was previously not active
                if (active === 0) {
                    addClass(event.target, '-drop-possible');
                    //event.target.textContent = 'Drop me here!';
                }

                event.target.setAttribute('active', active + 1);
            })
            .on('dropdeactivate', function(event) { // this fires after each drop, whether a drop into a valid drop zone occurs or not
                var active = event.target.getAttribute('active') | 0;

                // change style if it was previously active
                // but will no longer be active
                if (active === 1) {
                    removeClass(event.target, '-drop-possible');
                    //event.target.textContent = 'Dropzone';
                }

                event.target.setAttribute('active', active - 1);

                if (!validDrop) {
                    //document.getElementById("drag4").style.position = 'absolute';
                    //document.getElementById("drag4").style.left = startX + "px";
                    //document.getElementById("drag4").style.top = startY + "px";
                }

            })

        .on('dragstart', function(event) {
            // snap to the start position

            if (!startPos) {
                var rect = interact.getElementRect(event.target);

                // record center point when starting the very first a drag
                startPos = {
                    x: rect.left + rect.width / 2,
                    y: rect.top + rect.height / 2
                }
            }
            event.interactable.snap({
                anchors: [startPos]
            });
        })
        .on('dragenter', function(event) {
                addClass(event.target, '-drop-over');


                var dropRect = interact.getElementRect(event.target),
                    dropCenter = {
                        x: dropRect.left + dropRect.width / 2,
                        y: dropRect.top + dropRect.height / 2
                    };

                event.draggable.snap({
                    anchors: [dropCenter]
                });


                //event.relatedTarget.textContent = 'I\'m in';
            })
            .on('dragleave', function(event) {
                removeClass(event.target, '-drop-over');

                event.draggable.snap(false);

                // when leaving a dropzone, snap to the start position
                event.draggable.snap({
                    anchors: [startPos]
                });

                var svgFilename = getSVGFilename(event.relatedTarget.src);

                if (document.getElementById("message").innerHTML) {
                    document.getElementById("message").innerHTML = document.getElementById("message").innerHTML.replace(svgFilename + "<br>", "");
                }

                //event.relatedTarget.textContent = 'Drag me…';
            })
            .on('drop', function(event) { // this only fires when an object is dropped into a valid drop zone for that object
                validDrop = true;
                removeClass(event.target, '-drop-over');
                var svgFilename = getSVGFilename(event.relatedTarget.src);
                document.getElementById("message").innerHTML += svgFilename + "<br>";

                //event.relatedTarget.textContent = 'Dropped';
            });
    }

    function getAbsolutePosition(el) {
        var el2 = el;
        var curtop = 0;
        var curleft = 0;
        if (document.getElementById || document.all) {
            do {
                curleft += el.offsetLeft - el.scrollLeft;
                curtop += el.offsetTop - el.scrollTop;
                el = el.offsetParent;
                el2 = el2.parentNode;
                while (el2 != el) {
                    curleft -= el2.scrollLeft;
                    curtop -= el2.scrollTop;
                    el2 = el2.parentNode;
                }
            } while (el.offsetParent);

        } else if (document.layers) {
            curtop += el.y;
            curleft += el.x;
        }
        return [curleft, curtop];
    };

    function getSVGFilename(url) {
        if (url.indexOf("/") > -1)
            return url.substr(url.lastIndexOf('/') + 1);
        else
            return "";
    }

    function addClass(element, className) {
        if (element.classList) {
            return element.classList.add(className);
        } else {
            element.className += ' ' + className;
        }
    }

    function removeClass(element, className) {
        if (element.classList) {
            return element.classList.remove(className);
        } else {
            element.className = element.className.replace(new RegExp(className + ' *', 'g'), '');
        }
    }

    interact('.js-drag')
        .draggable({
            max: Infinity
        })
        .on('dragstart', function(event) {
            validDrop = false;

            event.interaction.x = parseInt(event.target.getAttribute('data-x'), 10) || 0;
            event.interaction.y = parseInt(event.target.getAttribute('data-y'), 10) || 0;

            var absolutePosition = getAbsolutePosition(event.target);
            startX = absolutePosition[0];
            startY = absolutePosition[1];

        })
        .on('dragmove', function(event) {
            event.interaction.x += event.dx;
            event.interaction.y += event.dy;

            if (transformProp) {
                event.target.style[transformProp] =
                    'translate(' + event.interaction.x + 'px, ' + event.interaction.y + 'px)';
            } else {
                event.target.style.left = event.interaction.x + 'px';
                event.target.style.top = event.interaction.y + 'px';
            }
        })
        .on('dragend', function(event) {
            event.target.setAttribute('data-x', event.interaction.x);
            event.target.setAttribute('data-y', event.interaction.y);
        });

    interact(document).on('ready', function() {
        transformProp = 'transform' in document.body.style ? 'transform' : 'webkitTransform' in document.body.style ? 'webkitTransform' : 'mozTransform' in document.body.style ? 'mozTransform' : 'oTransform' in document.body.style ? 'oTransform' : 'msTransform' in document.body.style ? 'msTransform' : null;
    });

}(window.interact));

（功能（交互）{
"严格使用",；
var-transformProp；
var startPos=null；
var startX=0；
var-startY=0；
var validDrop=false；
最大交互作用（无穷大）；
//设置可拖动的元素。
/*下面的块是从中复制的https://github.com/taye/interact.js/issues/79 --试着让它工作起来*/
//设置放置区域。
setupDropzone（“#drop1”、“drag1”、“drag2”、“drag4”）；
setupDropzone（'drop2'，'drag4'）；
setupDropzone（“#drop4”和“#drag4”）；
setupDropzone（“#drop5”、“#drag1、#drag2、#drag4”）；
setupDropzone（'drop6'，'drag3'）；
setupDropzone（'drop7'，'drag1'）；
/*快照代码是从中复制的http://kundprojekt.soonce.com/lintex/zonbuilder/ 及https://github.com/taye/interact.js/issues/79 --试着让它工作起来*/
//dropzone#1接受可拖动的#1
//setupDropzone（'drop1'，'drag1'）；
//dropzone#2接受可拖动的#1和#2
//setupDropzone（“#drop2”、“drag1”、“drag2”）；
//每个dropzone都接受可拖动的#3
//setupDropzone（'.js drop'，'#drag3'）；
/**
*将给定元素设置为dropzone。
*
*@param{HTMLElement|String}el
*@param{String}接受
*/
功能设置DropZone（el，接受）{
互动（el）
.dropzone({
接受：接受，
ondropactivate:功能（事件）{
addClass（event.relatedTarget，'-drop-mable'）；
},
ondropdeactivate:功能（事件）{
removeClass（event.relatedTarget，'-drop-mable'）；
}
})
.啪({
模式：“锚定”，
主播：[]，
范围：无限，
elementOrigin：{
x:0.5，
y:0.5
},
内：对
})
.on（'dropactivate'，功能（事件）{
var active=event.target.getAttribute（'active'）| 0；
//更改以前未激活的样式
如果（活动===0）{
addClass（event.target，'-drop-mable'）；
//event.target.textContent='Drop me here！'；
}
event.target.setAttribute（'active'，active+1）；
})
.on（'dropdeactivate'，函数（事件）{//在每次拖放后激发，无论是否发生有效拖放区域的拖放
var active=event.target.getAttribute（'active'）| 0；
//更改以前处于活动状态的样式
//但将不再处于活动状态
如果（活动===1）{
removeClass（event.target，'-drop-mable'）；
//event.target.textContent='Dropzone'；
}
event.target.setAttribute（'active'，active-1）；
如果（！validDrop）{
//document.getElementById（“drag4”）.style.position='absolute'；
//document.getElementById（“drag4”）.style.left=startX+“px”；
//document.getElementById（“drag4”）.style.top=startY+“px”；
}
})
.on（'dragstart'，函数（事件）{
//捕捉到起始位置
如果（！startPos）{
var rect=interact.getElementRect（event.target）；
//开始第一次拖动时记录中心点
startPos={
x:rect.left+rect.width/2，
y:rect.top+rect.height/2
}
}
event.interactiable.snap({
主播：[startPos]
});
})
.on（'dragenter'，功能（事件）{
addClass（event.target，'-drop-over'）；
var dropRect=interact.getElementRect（event.target），
dropCenter={
x:dropRect.left+dropRect.width/2，
y:dropRect.top+dropRect.height/2
};
event.draggable.snap({
主播：[dropCenter]
});
//event.relatedTarget.textContent='我在'；
})
.on（'dragleave'，函数（事件）{
removeClass（event.target，'-drop-over'）；
event.draggable.snap（false）；
//离开dropzone时，捕捉到开始位置
event.draggable.snap({
主播：[startPos]
});
var svgFilename=getSVGFilename（event.relatedTarget.src）；
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>WorkScreen Prototype #1</title>
   <script src="js/interact.js"></script>
   <script src="js/dropzones.js"></script>
   <link rel="stylesheet" href="css/dropzones.css">
</head>
<body style="background-color: #CCC; height: 852px">
   <a href="ShowSVGs.aspx" target="_blank">View All SVGs</a>
   <div style="margin-top:55px">
      <div style="float: left; vertical-align: top">
         <img id="drag1" src="images/SVG/ksBatteryBox.svg" class="draggable js-drag" style="width:80px"><br />
         <img id="drag2" src="images/SVG/ksBumper6308700.svg" class="draggable js-drag" style="width:85px"><br />
         <img id="drag3" src="images/SVG/ksHood8090130.svg" class="draggable js-drag" style="width:165px"><br />
         <img id="drag4" src="images/SVG/ksTire.svg" class="draggable js-drag" style="width:85px"><br />
      </div>
      <div style="float: left;vertical-align:top;margin-left:-72px">
         <div style ="margin-left:100px;">

            <div id="drop1" class="dropzone js-drop" style="margin-left:186px;"></div>
            <div id="drop2" class="dropzone js-drop" style="margin-left:90px"></div>

            <div style="">
               <div id="drop6" class="dropzone js-drop" style="clear: both; margin-left: 0px; margin-top: 37px"></div>
               <div style="float:left"><img src="images/BaseTruck.png" /></div>
               <div id="drop7" class="dropzone js-drop" style="float: left; margin-left: 251px; margin-top: 153px; position: absolute;"></div>
               <div id="drop3" class="dropzone js-drop" style="float:left; margin-left:10px;margin-top:37px"></div>
            </div>

            <div id="drop5" class="dropzone js-drop" style="clear: both; margin-left: 186px;"></div>
            <div id="drop4" class="dropzone js-drop" style="margin-left: 90px;"></div>

            <br /><br />
            <div id="message" style="clear: both; margin-left: 0px; margin-top: 44px; width: 245px; display: inherit; border: 2px solid gray; padding: 7px;"></div>

         </div>
      </div>
   </div>
</body>
</html>

function resetCoords(evt) {
    evt.relatedTarget.style.left = "0px";
    evt.relatedTarget.style.top = "0px";
    evt.interaction.x = 0;
    evt.interaction.y = 0;
}

.on('dropdeactivate', function(event) { // this fires after each drop, whether a drop into a valid drop zone occurs or not
    var active = event.target.getAttribute('active') | 0;

    // change style if it was previously active
    // but will no longer be active
    if (active === 1) {
        removeClass(event.target, '-drop-possible');
        //event.target.textContent = 'Dropzone';
    }

    event.target.setAttribute('active', active - 1);

    if (!validDrop) {
        resetCoords(event);
    }

})