Проблема с перетаскиванием при перетаскивании
Макет, над которым я работаю, прилагается здесь, но у меня есть две проблемы:
- При перетаскивании перетаскиваемого элемента положение неверное.
- Я хотел бы убедиться, что при отбрасывании предыдущий контент переопределяется, что я сделал и работает нормально, но у меня есть три dropables, и всякий раз, когда я нажимаю на любой из dropables, отброшенный элемент в других dropables также заменяется последним, но я хочу ограничить переопределение элементом, на который я отбрасывал.
Планируйте просматривать макет на экранах размером более 1024 пикселей.
Если бы кто-нибудь мог дать мне знать, это было бы замечательно.
Грамматика и формат были улучшены.
Пожалуйста, добавьте к вопросу соответствующую часть вашего кода.
@LajosArpad Невозможно вставить сюда весь код из-за ограничений на количество символов, я очистил код в ссылке codepen, если вы можете проверить сейчас.
Я ответил на ваш вопрос, но в будущем постараюсь также поделиться соответствующей частью кода в вопросе, было излишне сложно ответить, не зная, где искать. Кроме того, внешние ссылки могут со временем сломаться. Наконец, вопрос должен состоять из одного вопроса. Вы задали два вопроса в качестве вопроса. Вы должны были задать их как отдельные вопросы.
@LajosArpad, спасибо за советы, я буду помнить их для следующих.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Проблема позиционирования возникает из-за значений, которые вы указали для translateX и translateY, соответственно, здесь:
.problemanserwrapper .problemanswers.ui-draggable-dragging {
transform: rotate(0)
}
.problemanserwrapper .problemanswers:nth-child(1).ui-draggable-dragging {
transform: rotate(0)
}
.problemanserwrapper .problemanswers:nth-child(2).ui-draggable-dragging {
transform: rotate(0) translateX(75%) translateY(-25%)
}
.problemanserwrapper .problemanswers:nth-child(3).ui-draggable-dragging {
transform: rotate(0) translateX(135%) translateY(-100%)
}
.problemanserwrapper .problemanswers:nth-child(4).ui-draggable-dragging {
transform: rotate(0) translateX(275%) translateY(-80%)
}
.problemanserwrapper .problemanswers:nth-child(5).ui-draggable-dragging {
transform: rotate(0) translateX(380%) translateY(47%)
}
.problemanserwrapper .problemanswers:nth-child(6).ui-draggable-dragging {
transform: rotate(0) translateX(492%) translateY(-20%)
}
.problemanserwrapper .problemanswers:nth-child(7).ui-draggable-dragging {
transform: rotate(0) translateX(92%) translateY(72%)
}
.problemanserwrapper .problemanswers:nth-child(8).ui-draggable-dragging {
transform: rotate(0) translateX(202%) translateY(40%)
}
.problemanserwrapper .problemanswers:nth-child(9).ui-draggable-dragging {
transform: rotate(0) translateX(302%) translateY(-20%)
}
.problemanserwrapper .problemanswers:nth-child(10).ui-draggable-dragging {
transform: rotate(0) translateX(402%) translateY(90%)
}
Если вы найдете их правильную ценность, то с их позиционированием все будет в порядке. Я не делал этого для всех, но приведу пример:
.problemanserwrapper .problemanswers:nth-child(3).ui-draggable-dragging {
transform: rotate(0) translateX(75%) translateY(-50%)
}
Причина второй проблемы заключается в том, что вы используете одну переменную pastDraggable для отслеживания истории всех трех блоков. Каждый раз, когда вы помещаете предмет в коробку, значение pastDraggable будет изменено. Каждый раз, когда вы помещаете следующий элемент, значение pastDraggable будет предыдущим, независимо от его поля, оно будет удалено из поля, и новое значение будет иметь приоритет. Вы должны объявить pastDraggable как массив:
var pastDraggable = ["", "", ""];
а в событии drop найдите индекс:
var droppableIndex = 0;
if ($(this).hasClass("droppable2")) droppableIndex = 1;
else if ($(this).hasClass("droppable3")) droppableIndex = 2;
и при каждом использовании pastDraggable убедитесь, что вы используете его вместе с его индексом, как pastDraggable[droppableIndex].
Привет @Lajos, да, вторая проблема была решена вчера, и проблема была именно такой, как вы описали, с использованием той же переменной. Спасибо. Но для первой проблемы нет другого способа, кроме нахождения текущего значения преобразования, например, взять позицию перемещения мыши и передать ее позиции перетаскиваемого объекта?
@RajatJain, возможно, это возможно, но код слишком длинный, чтобы давать бесплатную помощь, не зная, где его искать. Здесь мы хотим вам помочь, но не будем уделять слишком много времени. Вы должны проверить в своем браузере, какие правила CSS влияют на положение ваших элементов и откуда возникает проблема. Это будет долгий анализ, который ответчики здесь делать не будут. Лучше всего сделать быстрое исправление в соответствии с моим ответом, чтобы ваше программное обеспечение работало хорошо, и если вы не удовлетворены решением, найдите более элегантное решение.
Спасибо за понимание, я понимаю, что это займет много времени. Однако я нашел основную причину и решил ее, проблема заключалась в свойстве преобразования translate, которое я использовал для размещения элементов, которое влияло на положение, даже когда элементы перетаскивались, поэтому я изменил его, чтобы использовать поля для позиционирования, и он работает отлично сейчас. Спасибо за ваше время и помощь.
@RajatJain добро пожаловать, и я рад, что ваша проблема решена.