مرجع تخصصی برنامه نویسان

بزرگترین انجمن برنامه نویسان فارسی زبان

drap data_id در html5

یکشنبه, 18 فروردین 1398 14:08

drap data_id در html5

سلام

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

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

باید چه کدی بنویسم

 

چهارشنبه, 28 فروردین 1398 10:45

سلام 

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

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

باتشکر 

ارسال پاسخ برای این تاپیک

ارسال پاسخ مخصوص اعضا سایت می باشد ! میتوانید با حساب کاربری خود وارد سایت شده یا ثبت نام کنید