javascript - 在 JavaScript 中无法恢复

Question

我有 3 个 id 为 div1 的盒子，以及一个 id 为 drag1 的盒子。框drag1可以拖放到任意框div1。

我想知道是否有一种方法可以在 javascript 中的拖动过程中看到 div drag1 - 就像在 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 中，每个元素都必须具有唯一的 ID，因此 div1 不能是所有三个元素的 ID。

我的这个例子组合得不好，但它给了你一些开始的东西。您没有在帖子中包含触发恢复事件所需的内容。我的示例仅在拖动到具有 revert 类名的 Drop 时才恢复 Drag。

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">

希望有帮助。