درخواست های ارتباط
جستجو
لیست دوستان من
صندوق پیام
همه را دیدم
  • در حال دریافت لیست پیام ها
صندوق پیام
رویدادها
همه را دیدم
  • در حال دریافت لیست رویدادها
همه رویدادهای من
تخفیف های وب سایت
همه تخفیف ها

drap data_id در html5

نویسنده متن پست
پاسخ به این پست
author
iran58
1398/01/18 02:08:20
سلام
من کد زیر را نوشته ام
<!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 شود

باید چه کدی بنویسم
author
iran58
8 روز قبل
سلام

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

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

باتشکر

برای ارسال پست ابتدا به سایت وارد شوید

مطالب مرتبط

در حال دریافت اطلاعات

عضویت در

کانال تلگرام

توسینسو

دوره های پیشنهادی

دوره های توسینسو دوره آموزشی برنامه نویسی به زبان پرل بصورت پروژه محور
دوره آموزشی برنامه نویسی به زبان پرل بصورت پروژه محور
مدرس: ایمان جوادی
این دوره را در 13 قسط خریداری کنید
دوره آموزشی طراحی رابط کاربری با JavaFX
دوره آموزشی طراحی رابط کاربری با JavaFX
مدرس: حسام رسولیان
این دوره را در 13 قسط خریداری کنید
دوره آموزشی برنامه نویسی پیشرفته زبان سی شارپ
دوره آموزشی برنامه نویسی پیشرفته زبان سی شارپ
مدرس: حسین احمدی
این دوره را در 78 قسط خریداری کنید
دوره متوسطه برنامه نویسی به زبان جاوا به زبان ساده
دوره متوسطه برنامه نویسی به زبان جاوا به زبان ساده
مدرس: مهدی عادلی فر
این دوره را در 18 قسط خریداری کنید
دوره آموزشی ساخت ربات تلگرام
دوره آموزشی ساخت ربات تلگرام
مدرس: کاظم تقندیکی
این دوره را در 8 قسط خریداری کنید
ساخت و مدیریت ربات تلگرام از صفر با زبان سی شارپ
ساخت و مدیریت ربات تلگرام از صفر با زبان سی شارپ
مدرس: مهدی عادلی فر
این دوره را در 2 قسط خریداری کنید
دوره آموزشی برنامه نویسی WPF در ویژوال استودیو
دوره آموزشی برنامه نویسی WPF در ویژوال استودیو
مدرس: امیر حسین فضلیخانی
این دوره را در 12 قسط خریداری کنید
دوره آموزشی Exploit نویسی به زبان Perl
دوره آموزشی Exploit نویسی به زبان Perl
مدرس: ایمان جوادی
این دوره را در 7 قسط خریداری کنید
دوره آموزشی برنامه نویسی مقدماتی پایتون به زبان ساده
دوره آموزشی برنامه نویسی مقدماتی پایتون به زبان ساده
مدرس: حسین احمدی
این دوره را در 23 قسط خریداری کنید
دوره آموزشی مقدماتی برنامه نویسی به زبان سی شارپ
دوره آموزشی مقدماتی برنامه نویسی به زبان سی شارپ
مدرس: حسین احمدی
این دوره را در 17 قسط خریداری کنید
دوره آموزشی اسکریپت نویسی Batch یا Batch Scripting در ویندوز به زبان ساده
دوره آموزشی اسکریپت نویسی Batch یا Batch Scripting در ویندوز به زبان ساده
مدرس: حسین احمدی
این دوره را در 11 قسط خریداری کنید
دوره آموزشی پردازش متن با زبان برنامه نویسی پایتون
دوره آموزشی پردازش متن با زبان برنامه نویسی پایتون
مدرس: کاظم تقندیکی
این دوره را در 20 قسط خریداری کنید
دوره تخصصی آموزش متن کاوی با ابزار NLTK
دوره تخصصی آموزش متن کاوی با ابزار NLTK
مدرس: کاظم تقندیکی
این دوره را در 11 قسط خریداری کنید
دوره آموزشی برنامه نویسی اندروید با زبان جاوا به زبان ساده
دوره آموزشی برنامه نویسی اندروید با زبان جاوا به زبان ساده
مدرس: مهدی عادلی فر
این دوره را در 27 قسط خریداری کنید
دوره آموزشی مقدماتی برنامه نویسی جاوا به زبان ساده
دوره آموزشی مقدماتی برنامه نویسی جاوا به زبان ساده
مدرس: مهدی عادلی فر
این دوره را در 17 قسط خریداری کنید
تاپیک های پربازدید