Перетаскивание вопроса при перетаскивании

Question

Макет, над которым я работаю, прилагается, но у меня есть две проблемы:

1. При перетаскивании позиция перетаскиваемого элемента не является правильной.
2. Я хотел бы убедиться, что при удалении предыдущее содержимое переопределяется, что я сделал и работает нормально, но у меня есть три dropables и всякий раз, когда я перетаскиваю на любую из dropables, удаляемый элемент в других dropables также заменяется последним, но я хочу ограничить переопределение элементом, к которому я добавлял.

Plesae просматривает макет на экранах размером более 1024 пикселей.

Если кто-нибудь может дать мне знать, это было бы удивительно.

Answer 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],