drap data_id در html5

Printable View

یک شنبه 18 فروردین 1398, 13:38 عصر
Iran58

drap data_id در html5

سلام
من کدهای زیر را نوشته ام

کد HTML:

<!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 عصر
مهدی کرامتی

نقل قول: drap data_id در html5

با چه کتابخانه ای کار می کنید؟
دوشنبه 19 فروردین 1398, 06:44 صبح
Iran58

نقل قول: drap data_id در html5

نقل قول:

نوشته شده توسط مهدی کرامتی

با چه کتابخانه ای کار می کنید؟

سلام
با jquery,bootstrap

نقل قول: drap data_id در html5

سلام



$("#a1").on("click" , function(){

  var data = $(this).data('id');

  console.log(data);

  $(this).remove();

  $("#div1").data('id', data);

});

منظورتون همین بود؟

چهارشنبه 28 فروردین 1398, 09:20 صبح
Iran58

نقل قول: drap data_id در html5

سلام
من کدم را بصورت زیر تغییر دادم

کد HTML:

<!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>

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