Вернуться назад невозможно в JavaScript

Question

У меня есть 3 коробки с идентификатором div1 и поле с идентификатором drag1.Поле drag1 можно перетащить в любой блок div1.

Я хочу знать, есть ли способ увидеть div drag1 во время перетаскивания в javascript - как в jquery.

Возможен ли возврат назад, потому что я не хочу полностью менять функцию на jquery

Как этого добиться?

function allowDrop(ev) {
		ev.preventDefault();
	}
	
	function drag(ev) {
		ev.dataTransfer.setData("text", ev.target.id);
	}
	
	function drop(ev) {
		ev.preventDefault();
		var data = ev.dataTransfer.getData("text");
		ev.target.appendChild(document.getElementById(data));
		
		
	}
	
/*	
	 $("#drag1").draggable({
					revert: "valid",
					drag: function (event, ui) {
							$("#info").html("<font color=red>This square will go back to it`s original position once it`s dropped in target zone. </font>");
					}
			});
			
      
$("#div1").droppable({
	drop: function (event, ui)
  {
	$(this).css("background-color", "lightgreen")
	},
	out: function (event, ui) 
  {
	$(this).css("background-color", "")
	}
			});
	});			
  
  */

#div1 {
    width:120px;
    height: 100px;
    padding: 10px;
    border: 1px solid #aaaaaa;
	float:left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>


<img id="drag1" src="https://picsum.photos/200/300/?random" 
draggable="true" ondragstart="drag(event)" width="100" height="100" style="border:solid">

Answer 1

Во-первых, в HTML вы должны иметь уникальные идентификаторы для каждого элемента, поэтому div1 не может быть идентификатором для всех трех.

Этот мой пример плохо составлен, и он дает вам возможность начатьс.Вы не включили в свое сообщение то, что необходимо для запуска события revert.мой пример только отменяет перетаскивание, если оно перетаскивается в перетаскивание с именем класса revert.

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
  var boxData = ev.target.getBoundingClientRect();
  ev.dataTransfer.setData("original-position-top", boxData.top);
  ev.dataTransfer.setData("original-position-left", boxData.left);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
  if (ev.target.className == "revert") {
    var el = document.getElementById(data);
    el.style.position = "relative";
    var startPosition = el.getBoundingClientRect();
    startPosition = {
      top: startPosition.top,
      left: startPosition.left
    };
    var targetPosition = {
      top: ev.dataTransfer.getData("original-position-top"),
      left: ev.dataTransfer.getData("original-position-left")
    };
    console.log("Trigger Revert", el.id, startPosition, targetPosition);

    function calcSteps(start, finish) {
      var l = Math.abs(start.left - finish.left);
      var t = Math.abs(start.top - finish.top);
      return {
        top: t,
        left: l,
        pick: (l > t ? "left" : "top")
      };
    }
    var steps = calcSteps(startPosition, targetPosition);
    console.log("Steps:", steps);
    var a = setInterval(frame, 2);

    function frame() {
      var i = steps.pick;
      console.log("Animate Frame:", steps[i]);
      if (steps[i] <= 0) {
        clearInterval(a);
      } else {
        if (startPosition.left + 1 > targetPosition.left) {
          // Do nothing
        } else {
          startPosition.left++;
          el.style.left = startPosition.left + "px";
        }
        if (startPosition.top + 1 > targetPosition.top) {
          // Do nothing
        } else {
          startPosition.top++;
          el.style.top = startPosition.top + "px";
        }
        console.log("Animate Frame:", steps[i], startPosition);
        steps[i]--;
      }
    }
  }
}

#div1,
#div2,
#div3 {
  width: 120px;
  height: 100px;
  padding: 10px;
  border: 1px solid #aaaaaa;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" class="revert"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="https://picsum.photos/200/300/?random" draggable="true" ondragstart="drag(event)" width="100" height="100" style="border:solid">

Надеюсь, что поможет.