(Javascript / jQuery) Как перетащить файл SVG без взаимодействия с самим SVG, но только с дочерним элементом? - PullRequest
Новая
       1

(Javascript / jQuery) Как перетащить файл SVG без взаимодействия с самим SVG, но только с дочерним элементом?

0 голосов
/ 05 апреля 2020

Я новичок в Javascript / jQuery, поэтому я прошу прощения, если я не объясняю вещи ясно или использую неправильную терминологию.

Я пытаюсь сделать игру перетаскиванием с SVGs. Я работаю с 8 изображениями ломтика пиццы. Каждый из этих SVG-файлов содержит один путь, который имеет класс «drag».

Что я хочу: когда вы щелкаете и перетаскиваете элемент path.drag, на самом деле перемещается родительский SVG. (Обычно я бы просто заставлял элементы SVG сами щелкать и перетаскивать, но я не могу в этом случае, потому что тогда прозрачное пространство снаружи изображения будет реагировать на щелчок и перетаскивание, а это кусочки пиццы, которые будет организована как целая пицца, поэтому у меня не будет прозрачных областей, взаимодействующих.) У меня уже есть функция dragElement () с щелчком и перетаскиванием, которая отлично работает.

Так как я работаю с многочисленными перетаскиваемыми элементы, я создал массив, чтобы я мог использовать for-l oop для всех элементов path.drag - для каждого элемента 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);
    }

У меня есть эта «фоновая», «голубая» строка, чтобы я мог проверить, правильна ли моя переменная / действительно ли она ссылается на родительский SVG-элемент paths [i]. Но когда я пытаюсь использовать эту же переменную в качестве параметра для созданной мной функции dragElement, эта функция не работает. Я должен отметить, что функция РАБОТАЕТ, если я назначаю SVG идентификатор «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>
...