Перетаскивание группы SVG с дочерним объектом Foreignobject и возможность перетаскивания содержимого дочернего объекта foriengobject с помощью gsap draggable - PullRequest
Новая
       18

Перетаскивание группы SVG с дочерним объектом Foreignobject и возможность перетаскивания содержимого дочернего объекта foriengobject с помощью gsap draggable

0 голосов
/ 06 июня 2019

Я использую перетаскивание gsap для перетаскивания svg-группы с ее содержимым (содержит foreignObject) и позволяю его содержимому (содержимому в foreignObject) быть перетаскиваемым независимо.

я хочу достичь, когда перетаскиваю серыйполе, его содержимое (ячейка голубого цвета) также должно быть перетащено, а также позволяет мне перетаскивать только голубые ячейки.

если я комментирую функцию перетаскивания потомков, то перетаскивание родительских и потомских объектов работает, но когда я добавляю дочерние перетаскивания, он не работает должным образом.

код, написанный ниже, основан на примере, который я нашел в форме gsap. 

Draggable.create('.node-container');

Draggable.create('.tablecelldiv', {
  onPress: function(event){
    event.stopPropagation();
  }
});
.tablecelldiv {
 
  background: cyan;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/utils/Draggable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>

<svg width="900" height="250">
  <g class="node-container">
   <rect height="290" width="290" fill="grey"></rect>
        <foreignObject width="230" height="220" y="62" x="12.5" style="overflow: hidden" >
          <div className="tablebodydiv">
            <div class="tablecelldiv">row 1</div>
            <div class="tablecelldiv">row 2</div>
            <div class="tablecelldiv">row 3</div>
            <div class="tablecelldiv">row 4</div>
          </div>
        </foreignObject>
      </g>
</svg>

РЕДАКТИРОВАТЬ: Я тестировал этот код в браузерах MS Edge и FireFox, и он работал отлично.Я считаю, что это ошибка либо в GSAP, либо в Google Chrome.

...