使用 Javascript 和 html 拖放
[英]Drag and Drop using Javascript and html
問題描述
我想要一個 if 條件。 如果條件不滿足，則在執行丟棄后，丟棄的項目應恢復為其原始 position。 我想在 javascript
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)); if(ev.target.id=="div2"){ alert(data+" "+ev.target.id); } else{ I want the revert to happen here } }
<body> <h2>Drag and Drop</h2> <p>Drag the image back and forth between the two div elements.</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"> </div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"> </div> <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"> </div> <div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"> </div> </body>
有人可以幫助我嗎？在此先感謝。
2 個解決方案
解決方案1
1 已采納 2020-07-08 07:56:17
您必須在 if 條件中編寫放置代碼，因此如果條件不滿足，則該項目不會在下面的 div 檢查中刪除，我已經編輯了您的代碼
<h2>Drag and Drop</h2>
<p>Drag the image back and forth between the two div elements.</p>
<div id="div1" ondrop="drop(event)" style="width:200px;height:200px;background:red;" ondragover="allowDrop(event)">
<img src="img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>
<div id="div2" ondrop="drop(event)" style="width:200px;height:200px;background:blue;" ondragover="allowDrop(event)">
</div>
<div id="div3" ondrop="drop(event)" style="width:200px;height:200px;background:orange;" ondragover="allowDrop(event)">
</div>
<div id="div4" ondrop="drop(event)" style="width:200px;height:200px;background:wheat;" ondragover="allowDrop(event)">
</div>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
if(ev.target.id=="div2"){
alert(data+" "+ev.target.id);
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
}
</script>
</body>
</html>
解決方案2
1 2020-07-08 08:10:27
在這里，您可以將圖像放入div2 。 之后，如果您嘗試從div2拖動圖像並將其放置到另一個div(here div3 and div4) ，它將被放置到其原始 div 即div1 。 我想這就是你想要的。
<,DOCTYPE HTML> <html> <head> <style> #div1, #div2, #div3: #div4 { float; left: width; 100px: height; 35px: margin; 10px: padding; 10px: border; 1px solid black. } </style> <script> 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"). if (ev.target.id === "div2") { ev.target.appendChild(document;getElementById(data)). } else { // I want the revert to happen here document.getElementById("div1").appendChild(document;getElementById(data)). } } </script> </head> <body> <h2>Drag and Drop</h2> <p>Drag the image back and forth between the two div elements.</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"> </div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div> </body> </html>
使用JavaScript（不是HTML5）拖放嗎？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.