jquery拖放按钮onclick
Posted
技术标签:
【中文标题】jquery拖放按钮onclick【英文标题】：Jquery drag and drop the button onclick 【发布时间】：2020-10-08 08:09:12 【问题描述】：我试图通过单击按钮而不是拖放将按钮移动到下一个 div。此代码取自 w3schools 网站。我的问题是是否可以通过单击将按钮移动到下一个 div按钮改为拖放
<!DOCTYPE html>
<html>
<head>
<style>
#div1, #div2
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");
ev.target.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" >
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
【问题讨论】：
如果你想做一些按钮的显示和隐藏，那么使用 jquery 的显示和隐藏来代替这个。 & 在两个 div 中创建单独的按钮。 【参考方案1】：<!DOCTYPE HTML>
<html>
<head>
<style>
#div1,
#div2
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");
ev.target.appendChild(document.getElementById(data));
function move(ev)
ev.preventDefault();
var target = (ev.target.parentNode.id == 'div1') ? 'div2' : 'div1';
document.getElementById(target).appendChild(ev.target);
</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)" onClick="move(event)" id="drag1" >
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
【讨论】：
【参考方案2】：是的，这是可能的。你可以检查一下：
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1, #div2
float: left;
width: 100px;
height: 35px;
margin: 10px;
padding: 10px;
border: 1px solid black;
#button2
display: none;
</style>
<script>
function moveButton(e)
let btn1 = document.getElementById('button1');
let btn2 = document.getElementById('button2');
let btn_id = e.target.id;
if(btn_id == "button1")
e.target.style.display = 'none';
btn2.style.display= 'block';
else
e.target.style.display = 'none';
btn1.style.display= 'block';
</script>
</head>
<body>
<div id="div1">
<button id="button1" onClick="moveButton(event)">Click Me</button>
</div>
<div id="div2"><button id="button2" onClick="moveButton(event)">Click Me</button></div>
</body>
</html>
【讨论】：
以上是关于jquery拖放按钮onclick的主要内容，如果未能解决你的问题，请参考以下文章