Drag and Drop issue while dragging

Question

A layout that I am working on is attached here, but I have two problems:

1. While dragging the draggable item's position is not right.
2. I would like to make sure that upon drop the previous content is overriden, which I did and is working fine, but I have three dropables and whenever I drop on any of the dropables the dropped element in the other dropables is also replaced by latest, but I want to restrict the override to the item I was dropping at.

Plesae view the layout in screens bigger than 1024px.

If anyone can let me know, it would be amazing.

Answer 1

The positioning problem comes from the values you have provided to translateX and translateY, respectively, here:

  .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%)
  }

If you find their right value, then their positioning will be okay. I did not do this for all of them, but I will give you an example:

  .problemanserwrapper .problemanswers:nth-child(3).ui-draggable-dragging {
    transform: rotate(0) translateX(75%) translateY(-50%)
  }

The cause of the second problem is that you use a single variable called pastDraggable to track the history of all the three boxes. Whenever you put an item into a box, the value of pastDraggable will be changed. Whenever you put your next item, the value of pastDraggable will be the previous one, independently of its box, it will be removed from the box and the new value will override. You should declare pastDraggable as an array:

var pastDraggable = ["", "", ""];

and in the drop event, find out the index:

        var droppableIndex = 0;
        if ($(this).hasClass("droppable2")) droppableIndex = 1;
        else if ($(this).hasClass("droppable3")) droppableIndex = 2;

and at every usage of pastDraggable, make sure you use it along with its index, as pastDraggable[droppableIndex].