Question

我遇到了一个奇怪的问题……我有一个页面，该页面使用一些JavaScript来使SVG内的图像可拖动，并且可以正常工作。但是访问带有来自另一个页面的链接的页面时不可以。初始加载后重新加载页面效果很好，甚至可以直接通过URL栏访问页面。我不知所措。

在研究中，我偶然发现了以下答案：Rails, javascript not loading after clicking through link_to helper

但是在尝试所有解决方案后，似乎没有一个解决方案可以解决我的问题，尽管很可能是因为我没有将它们正确地应用于我的代码。我的SVG元素是一个指向“ makeDraggable（evt）”函数的“ onload”属性，并且该处的大多数解决方案都使其实现，因此它无法访问该函数。

这是我生成的初始链接的代码：

<%= link_to 'Play', canvas_path(:game => @game) %>

这是我的HTML代码：

<div id="container">
  <svg id="svg" onload="makeDraggable(evt)" width="50%" height="90%" 
  xmlns="http://www.w3.org/2000/svg">
    <defs>
      <pattern id="grid" width="40" height="40" 
       patternUnits="userSpaceOnUse">
        <rect width="80" height="80" fill="url(#smallGrid)"/>
        <path d="M 80 0 L 0 0 0 80" fill="none" stroke="black" stroke- 
        width="1"/>
      </pattern>
    </defs>
    <%@game_assets.each do |asset| %>
    <image class="draggable" id="<%=asset.id %>" height="536" width="536" 
    xlink:href="<%= url_for(asset.image) %>" x="<%= asset.position_x %>" y=" 
    <%= asset.position_y %>" style="position: relative;" 
    transform="translate(0 0)"></image>
    <% end %>
    <rect width="100%" height="100%"  style="pointer-events: none;" 
    fill="url(#grid)" />
  </svg>
</div>

这是我的JavaScript：

$(document).on('turbolinks:load', function () {
    $('#svg').draggable();
    $('.draggable').draggable();
});

// Makes content inside of SVG draggable
// Source: http://www.petercollingridge.co.uk/tutorials/svg/interactive/dragging/
function makeDraggable(evt) {
    var svg = evt.target;

    svg.addEventListener('mousedown', startDrag);
    svg.addEventListener('mousemove', drag);
    svg.addEventListener('mouseup', endDrag);
    svg.addEventListener('mouseleave', endDrag);
    svg.addEventListener('touchstart', startDrag);
    svg.addEventListener('touchmove', drag);
    svg.addEventListener('touchend', endDrag);
    svg.addEventListener('touchleave', endDrag);
    svg.addEventListener('touchcancel', endDrag);

    var selectedElement, offset, transform,
        bbox, minX, maxX, minY, maxY, confined;

    var boundaryX1 = 10.5;
    var boundaryX2 = 30;
    var boundaryY1 = 2.2;
    var boundaryY2 = 19.2;

    function getMousePosition(evt) {
        var CTM = svg.getScreenCTM();
        if (evt.touches) { evt = evt.touches[0]; }
        return {
            x: (evt.clientX - CTM.e) / CTM.a,
            y: (evt.clientY - CTM.f) / CTM.d
        };
    }

    function startDrag(evt) {
        if (evt.target.classList.contains('draggable')) {
            selectedElement = evt.target;
            offset = getMousePosition(evt);

            console.log("started dragging")

            // Make sure the first transform on the element is a translate transform
            var transforms = selectedElement.transform.baseVal;

            if (transforms.length === 0 || transforms.getItem(0).type !== 
                SVGTransform.SVG_TRANSFORM_TRANSLATE) {
                // Create an transform that translates by (0, 0)
                var translate = svg.createSVGTransform();
                translate.setTranslate(0, 0);
                selectedElement.transform.baseVal.insertItemBefore(translate, 
              0);
            }

            // Get initial translation
            transform = transforms.getItem(0);
            offset.x -= transform.matrix.e;
            offset.y -= transform.matrix.f;

            confined = evt.target.classList.contains('confine');
            if (confined) {
                bbox = selectedElement.getBBox();
                minX = boundaryX1 - bbox.x;
                maxX = boundaryX2 - bbox.x - bbox.width;
                minY = boundaryY1 - bbox.y;
                maxY = boundaryY2 - bbox.y - bbox.height;
            }
        }
    }

    function drag(evt) {
        if (selectedElement) {
            evt.preventDefault();
            console.log("drag triggered")

            var coord = getMousePosition(evt);
            var dx = coord.x - offset.x;
            var dy = coord.y - offset.y;

            if (confined) {
                if (dx < minX) { dx = minX; }
                else if (dx > maxX) { dx = maxX; }
                if (dy < minY) { dy = minY; }
                else if (dy > maxY) { dy = maxY; }
            }

            transform.setTranslate(dx, dy);
        }
    }

    function endDrag(evt) {
        selectedElement = false;
    }
}

如果有人可以阐明正在发生的事情，我将不胜感激。

如果我的帖子格式不正确，请原谅我。第一次海报：）

Answer 1

从onload="makeDraggable(evt)"元素中删除#svg，因为当您使用Turbolink时（如Rails一样）内联编写时，onload函数将不起作用。

然后将以下内容添加到您的JS中：

$(document).on('turbolinks:load', function () {
 if($('#svg').length == 1){
  makeDraggable($('#svg'));
 }
});

并将var svg = evt.target;更改为var svg = evt;

通过链接访问页面时

1 个答案: