نمایش نتایج 1 تا 5 از 5

نام تاپیک: drap data_id در html5

  1. #1

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

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

  2. #2
    بنیان گذار Barnamenevis آواتار مهدی کرامتی
    تاریخ عضویت
    اسفند 1381
    محل زندگی
    کرج، گلشهر
    سن
    46
    پست
    6,379

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

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

  3. #3

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

    نقل قول نوشته شده توسط مهدی کرامتی مشاهده تاپیک
    با چه کتابخانه ای کار می کنید؟
    سلام
    با jquery,bootstrap

  4. #4
    کاربر دائمی
    تاریخ عضویت
    مهر 1387
    محل زندگی
    تهران
    پست
    180

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

    سلام


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


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

  5. #5

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

تاپیک های مشابه

  1. پاسخ: 1
    آخرین پست: پنج شنبه 22 خرداد 1393, 15:02 عصر
  2. gui برنامه های دسکتاپ با Html5 ?
    نوشته شده توسط kingtak در بخش برنامه‌نویسی جاوا
    پاسخ: 6
    آخرین پست: جمعه 06 اردیبهشت 1392, 19:50 عصر
  3. سوال: ابزار طراحی انیمیشن در html5
    نوشته شده توسط hamidhws در بخش طراحی وب (Web Design)
    پاسخ: 2
    آخرین پست: جمعه 22 اردیبهشت 1391, 12:45 عصر

قوانین ایجاد تاپیک در تالار

  • شما نمی توانید تاپیک جدید ایجاد کنید
  • شما نمی توانید به تاپیک ها پاسخ دهید
  • شما نمی توانید ضمیمه ارسال کنید
  • شما نمی توانید پاسخ هایتان را ویرایش کنید
  •