Как переместить объект в точку экрана в gsap
У меня есть элемент dom с определенным именем класса, и я пытаюсь переместить этот элемент в определенную точку экрана после того, как пользователь закончил его перетаскивание.
Для этого я планирую создать элемент temp dom в позиции, куда я хочу переместить точку, переместить исходный элемент, а затем удалить элемент temp.
Вот мой код
gsap.registerPlugin(Draggable, MotionPathPlugin)
const selector = ".my-obj";
Draggable.create(selector, {
type: "x,y",
onDragEnd: function (e: any) {
const pointTag = document.createElement("temp-point-tag");
pointTag.style.position = 'absolute';
pointTag.style.top = 200 + window.scrollY + "px";
pointTag.style.left = 400 + window.scrollX + "px";
pointTag.style.width = "3px"
pointTag.style.height = "3px"
pointTag.style.backgroundColor = "red"
document.body.appendChild(pointTag);
const point = MotionPathPlugin.convertCoordinates(pointTag, document.querySelector(selector), { x: 0, y: 0 })
gsap.to(selector, { x: point.x, y: point.y });
},
});
Мой код не работает должным образом. У него нет статического поведения. Если бы я перетащил объект. он попадает в случайное место экрана, а также может выйти за пределы экрана.
Ожидаемое поведение MotionPathPlugin.convertCoordinates, как я понимаю из документации, заключается в перемещении в {x:0, y:x} относительно координат объекта, которые я указал.
Почему MotionPathPlugin.convertCoordinates не работает? Как правильно переместить объект в определенную точку (x,y) на экране?
Пример кода: я пытаюсь переместить красный квадрат в красную точку после завершения события перетаскивания https://codepen.io/abozanona/pen/wvZMdLd
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
gsap.registerPlugin(Draggable);
const selector = ".my-obj";
Draggable.create(selector, {
type: "x,y",
onDragEnd: function (e) {
const pointTag = document.createElement("temp-point-tag");
pointTag.style.position = "absolute";
pointTag.style.top = "100px";
pointTag.style.left = "100px";
pointTag.style.width = "3px";
pointTag.style.height = "3px";
pointTag.style.backgroundColor = "red";
document.body.appendChild(pointTag);
const point = pointTag.getBoundingClientRect();
console.info(point);
gsap.to(selector, { left: point.left, top: point.top, x: 0, y: 0 });
}
});.my-obj {
width: 50px;
height: 50px;
position: absolute;
bottom: 50px;
left: 50%;
background-color: red;
will-change: transform;
}<div class = "my-obj"></div>
<script src = "https://unpkg.com/gsap@3/dist/Draggable.min.js"></script>
<script src = "https://unpkg.com/gsap@3/dist/CSSRulePlugin.min.js"></script>
<script src = "https://unpkg.co/gsap@3/dist/gsap.min.js"></script>Вот решение. Я думаю, вам не нужно использовать дополнительные плагины, чтобы просто изменить значения позиции. Вот ссылка на код решения. Ссылка