iran58

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

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

لذت یادگیری با توسینسو
به عنوان شخصی که مدت هاست از سایت توسینسو استفاده می کنم باید بگم که واقعاً یکی از بهترین مرجع ها برای ارتقاء دانش شخصی هست. دوره های سایت، راهکارها و مطالب، همگی عالی هستند.
iran58

سلام

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

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

باتشکر

پاسخ شما
برای ارسال پاسخ خود وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره تابستانه می تونی امروز ارزونتر از فردا خرید کنی ....