سلام
من کدهای زیر را نوشته ام
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1{
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
background: blue;
}
</style>
</head>
<body>
<p>Drag the W3Schools image into the rectangle:</p>
<div id="div1" ondrop="drop(event)" data-id="" ondragover="allowDrop(event)"></div>
<br>
<br>
<br>
<a id="a1" data-id="1" draggable="true" ondragstart="drag(event)" >1</a>
<br>
<a id="a2" data-id="2" draggable="true" ondragstart="drag(event)" >2</a>
</body>
</html>
حالا می خواهم وقتی تگ a را دراپ کردم در تگ div مقدار data-id تگdiv هم برابر با مقدار data-id تگ a شود
باید چه کدی بنویسم
سلام
من کدم را بصورت زیر تغییر دادم
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drag and Drop</title>
<link rel="stylesheet" href="css/reset.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="placeholder" ondrop="drop(event)" ondragover="allowDrop(event)">
<div class="element first" id="first" draggable="true" ondragstart="drag(event)" data-id="a"></div>
</div>
<div class="placeholder" ondrop="drop(event)" ondragover="allowDrop(event)">
<div class="element second" id="second" draggable="true" ondragstart="drag(event)" data-id="b"></div>
</div>
<div class="placeholder" ondrop="drop(event)" ondragover="allowDrop(event)">
<div class="element third" id="third" draggable="true" ondragstart="drag(event)" data-id="c"></div>
</div>
<div class="placeholder" ondrop="drop(event)" ondragover="allowDrop(event)">
<div class="element four" id="four" draggable="true" ondragstart="drag(event)" data-id="d"></div>
</div>
</div>
<div class="container">
<div class="placeholder" ondrop="drop(event)" ondragover="allowDrop(event)" data-id=""></div>
<div class="placeholder" ondrop="drop(event)" ondragover="allowDrop(event)" data-id=""></div>
<div class="placeholder" ondrop="drop(event)" ondragover="allowDrop(event)" data-id=""></div>
<div class="placeholder" ondrop="drop(event)" ondragover="allowDrop(event)" data-id=""></div>
</div>
<script src='js/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("square", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("square");
ev.target.appendChild(document.getElementById(data));
}
حالا می خواهم data-id هم انتقال بدهم باید چه کدی بنویسم
باتشکر
هیچ کاربری تا کنون از این پست تشکر نکرده است
با ما تماس بگیرید تا در این مسیر همراهتان باشیم :)