ورود

View Full Version : سوال: drap data_id در html5


Iran58
یک شنبه 18 فروردین 1398, 13:38 عصر
سلام
من کدهای زیر را نوشته ام


<!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 شود

باید چه کدی بنویسم
مهدی کرامتی
یک شنبه 18 فروردین 1398, 20:51 عصر
با چه کتابخانه ای کار می کنید؟
Iran58
دوشنبه 19 فروردین 1398, 06:44 صبح
با چه کتابخانه ای کار می کنید؟
سلام
با jquery,bootstrap
farzane_t
پنج شنبه 22 فروردین 1398, 12:09 عصر
سلام




$("#a1").on("click" , function(){
var data = $(this).data('id');
console.log(data);
$(this).remove();
$("#div1").data('id', data);
});



منظورتون همین بود؟
Iran58
چهارشنبه 28 فروردین 1398, 09:20 صبح
سلام
من کدم را بصورت زیر تغییر دادم


<!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 هم انتقال بدهم باید چه کدی بنویسم
باتشکر