Question

我是Javascript / jQuery的新手，所以如果我没有清楚地解释事情或使用错误的术语，我深表歉意。

我正在尝试使用SVG进行拖放游戏。我正在处理8个披萨片图像。每个SVG都包含一个路径，该路径具有“拖动”类。

我想要的是：单击并拖动path.drag元素时，实际移动的是父SVG。（我通常只是使SVG元素本身可点击并拖动，但在这种情况下我无法这样做，因为这样，图像外部的透明空间会对点击并拖动的东西产生反应，而这些是披萨片，将被安排为一个整体的披萨，所以我不能让透明区域进行交互。）我已经有了单击和拖动功能dragElement（），它可以正常工作。

由于我正在使用许多可拖动元素，因此我制作了一个数组，因此可以对所有path.drag元素使用for循环-对于每个path.drag元素，找到其父SVG元素并将其放入我的dragElement函数：

var paths = document.getElementsByClassName('drag');
    for (i = 0; i < paths.length; i++) {
       var parent = $(paths[i]).parents('svg');
       $(parent).css('background', 'cyan');
       dragElement(parent);
    }

我有这条“背景”，“青色”线，因此我可以测试我的变量是否正确/它是否确实指向路径[i]的父SVG元素。但是，当我尝试使用相同的变量作为我创建的dragElement函数的参数时，该函数不起作用。我应该注意，如果我为SVG分配了ID“ pizzaslice”并使用该参数调用该函数，则该函数确实起作用：

var this_works = document.getElementById('pizzaslice');
dragElement(this_works);

然后可以拖动SVG。因此，并不是我的dragElement函数不适用于SVG-我实际上已经对其进行了重大修改，以使它可以（必须更改我的所有.position（）和.offset（）方法，因为显然SVG不能像那样）。

有人可以告诉我我在做什么错吗？这是我的完整代码：

JAVASCRIPT

var paths = document.getElementsByClassName('drag');
    for (i = 0; i < paths.length; i++) {
      var parent = $(paths[i]).parents('svg');
      var this_works = document.getElementById('pizzaslice');
      $(parent).css('background', 'cyan');
      dragElement(this_works);
    }

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
    elmnt.onmousedown = dragMouseDown;

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // test
    $('#test').css('margin', '10px');
    // set the element's new position while the element is being dragged:
    function getOffset(element) {
        var bound = element.getBoundingClientRect();        
        return {
            top: bound.top - pos2,
            left: bound.left - pos1
        }
    }
    var offset = getOffset(elmnt);
    var fromTop = (offset.top + "px");
    var fromLeft = (offset.left + "px");
    $('#demo').html(fromTop);
    $(elmnt).css('top', fromTop);
    $(elmnt).css('left', fromLeft);
  }

  function closeDragElement() {
    /* stop moving when mouse button is released:*/
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

CSS

.drag_parent {
    width: 60px;
    position: absolute;
}
.drag {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -webkit-crisp-edges;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: pixelated;
  pointer-events: auto;
}
.drag:hover {
    cursor: move;
}

HTML （抱歉，其中大部分只是SVG文件）

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<svg id="pizzaslice" class="drag_parent" version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 613.000000 850.000000" preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,850.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<path class="drag" d="M52 8486 c-5 -6 -13 -20 -17 -31 -12 -31 -23 -1712 -15 -2345 6 -454
3 -1253 -9 -2190 -4 -371 -5 -772 -1 -890 16 -458 29 -942 35 -1330 3 -223 10
-488 15 -590 5 -102 10 -360 10 -575 0 -372 5 -441 32 -508 11 -27 13 -28 56
-22 25 4 61 17 81 30 20 12 180 170 356 350 176 181 390 398 476 484 86 86
187 192 224 236 37 44 104 116 149 160 108 106 253 259 351 370 146 165 490
517 675 692 36 34 119 119 185 190 66 70 149 155 185 188 96 89 362 357 550
555 91 96 257 269 370 385 113 116 267 281 344 368 76 86 231 248 345 360 270
267 405 406 476 492 215 259 630 682 1049 1070 68 63 117 117 131 146 l24 46
-25 34 c-46 63 -119 132 -294 278 -230 193 -279 230 -445 343 -265 180 -769
485 -967 584 -80 40 -193 101 -250 135 -100 61 -299 160 -603 301 -225 105
-256 117 -440 174 -93 29 -225 73 -292 98 -223 84 -690 222 -828 246 -71 13
-197 38 -280 57 -127 29 -191 37 -425 53 -151 11 -333 27 -405 35 -71 9 -222
18 -335 21 -113 2 -267 6 -342 8 -93 2 -141 0 -146 -8z m688 -166 c263 -28
404 -40 573 -49 152 -9 217 -17 340 -45 84 -19 217 -46 297 -61 145 -27 732
-200 891 -263 41 -17 133 -46 204 -66 72 -19 160 -47 195 -62 106 -43 675
-325 820 -406 74 -41 218 -117 320 -168 523 -261 1023 -604 1534 -1052 l39
-34 -272 -269 c-150 -149 -276 -271 -280 -273 -4 -1 -27 13 -52 31 -168 127
-233 170 -295 193 -38 14 -105 47 -149 74 -44 26 -114 62 -155 79 -105 42
-292 111 -303 111 -5 0 -35 15 -66 34 -31 18 -146 81 -256 138 -110 58 -240
128 -290 155 -341 188 -565 303 -661 340 -62 23 -130 50 -151 61 -21 11 -81
36 -133 56 -52 21 -133 55 -180 76 -287 129 -493 204 -700 255 -58 15 -141 37
-185 50 -82 25 -680 126 -975 165 -91 12 -241 32 -335 45 -93 13 -206 27 -250
30 -133 10 -121 -2 -113 117 4 57 4 248 1 426 l-6 322 254 0 c140 0 292 -4
339 -10z m-195 -2290 c216 -103 333 -153 385 -165 114 -27 336 -31 537 -10
138 14 187 15 273 6 120 -12 229 -38 315 -76 112 -49 312 -166 411 -241 54
-42 144 -103 199 -137 151 -93 361 -237 461 -317 107 -85 335 -233 411 -267
86 -37 165 -52 344 -62 296 -18 504 -66 597 -139 l24 -18 -93 -88 c-97 -91
-190 -188 -494 -516 -224 -242 -1130 -1152 -1119 -1125 4 11 9 75 12 141 3
108 1 133 -23 225 -30 117 -72 198 -155 303 -119 150 -159 169 -400 197 -113
14 -204 19 -258 15 -84 -5 -94 -9 -291 -104 -19 -10 -68 -48 -109 -87 -62 -59
-81 -84 -123 -170 -65 -133 -82 -214 -83 -390 -1 -214 41 -352 143 -466 68
-76 127 -112 255 -154 201 -66 391 -70 535 -12 34 14 61 21 61 17 0 -4 -123
-128 -272 -276 -150 -148 -392 -392 -538 -542 l-265 -272 -35 10 c-90 26 -264
-1 -341 -53 -19 -12 -50 -29 -69 -37 -44 -18 -158 -131 -193 -192 -56 -94 -88
-321 -57 -402 10 -27 6 -33 -117 -163 -71 -74 -144 -153 -162 -176 -19 -23
-53 -62 -75 -87 l-41 -45 4 645 c2 395 -1 740 -8 890 -46 989 -55 1668 -37
3020 6 424 5 684 -3 870 -7 146 -15 347 -18 447 l-6 183 54 -16 c30 -8 193
-82 364 -164z"/>
</g>
</svg>

（Javascript / jQuery）如何拖放SVG文件而不与SVG本身进行交互，而仅与子元素进行交互？

0 个答案: