Перетаскивание вопроса при перетаскивании - PullRequest
Новая
       34

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

0 голосов
/ 15 сентября 2018

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

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

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

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

1 Ответ

0 голосов
/ 17 сентября 2018

Проблема позиционирования возникает из значений, которые вы указали для 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].

...