我有3个ID为div1
的盒子和一个ID为drag1
的盒子。框drag1可以拖放到div1框中。
我想知道是否有一种方法可以在javascript拖动期间(例如在jquery中)看到div drag1
。
因为我不想将功能完全更改为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">
答案 0 :(得分:1)
首先,在HTML中,每个元素必须具有唯一的ID,因此div1
不能是所有这三个元素的ID。
我的这个例子很难组合在一起,它为您提供了一些起点。您没有在帖子中包含触发revert
事件所需的内容。我的示例仅在拖动到具有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">
希望有帮助。