Question

我正在尝试制作一个页面，其中使用拖放事件将来自One Div的信息传递给其他div。在这里，Div-3包含数据列表，当我将Div-3拖动到div-1或Div-2时，当我删除div-3时，Div-3的列表信息应转移到Div-3中的Div- 1或Div-2。当我点击Div-5时，该部门本身也从父母部门移除。

<html>
<head>
<title>Information Passing Between DIV</title>
    <style>

          .div1
        {
            position:absolute;
            left:10px;
            top:10px;
            width: 350px;
            height: 250px;
            border-style: solid;
            border-color: #003366;
            border-width: 2px 2px 2px 2px;
            border-top-left-radius: 50px 50px;



        }

        .div2
        {
            position:absolute;
            left: 360px;
            top:10px;
            width: 350px;
            height: 250px;
            border-style: solid;
            border-color: #003366;
            border-width: 2px 2px 2px 2px;
            border-top-right-radius: 50px 50px;
            box-shadow: 0px 0px 15px 10px rgba(255, 255, 255, .75);


        }

        .div3
        {
            position:absolute; 
            left:760px;
            top: 60px;
            width: 200px;
            height: 200px;
            border-style:solid;
            border-color: #003366;
            font-size: 15px;
            border-width: 2px 2px 2px 2px;
            border-radius:100px;
            cursor:pointer;


        }

    .div4
    {
        position: relative;
        margin: 17px;
        margin-left: 25px;
    }

      .div5
        {
            position:absolute; 
            left:30px;
            top: 100px;
            width: 100px;
            height: 100px;
            border-style:solid;
            border-color: #003366;
            font-size: 15px;
            border-width: 2px 2px 2px 2px;
            border-radius:10px;
            background-color: azure;
              text-align: right;

        }





    </style>    






</head>

<body>



    <div class="div1">
        <div class="tag"><h2><center>DIV1</center></h2></div>

        </div> 
    <div class="div2">
        <div class="tag"><h2><center>DIV2</center></h2></div>

        </div>

    <div class="div3" draggable="true">
        <br>
        <br>
       <div class="div4">
        <form id="f1">
           <table>
           <tr>
            <td>
                <input list="size" name="size1" placeholder="Size" style="max-width:80%"> 

               <datalist id="size">
                    <option value="200x200">
                    <option value="200x600">
                    <option value="300x300">
                    <option value="300x600">

                </datalist>
               </td>
               </tr>

               <tr>
            <td>
                <input list="pc" name="pc1" placeholder="Product Category" style="max-width:80%"> 

               <datalist id="pc">
                    <option value="Ceramic Wall">
                    <option value="Ceramic/Semi-Porcelian Floor">


                </datalist>
                   </td>
               </tr>


               <tr><td>
           <input list="ff" name="ff1" placeholder="Feel/Finish" style="max-width:80%"> 

               <datalist id="ff">
                    <option value="Glossy">
                    <option value="Special Protection Coat">

                </datalist></td></tr>


               <tr><td>

           <input list="q1" name="q11" placeholder="Quality" style="max-width:80%"> 

               <datalist id="q1">
                    <option value="Premium">
                    <option value="Standard">
                    <option value="Other">

                </datalist></td></tr>




        </table>
        </form> 
        </div>
    </div>


    <div class="div5">
       X 



        </div>

    </body>



</html>

请帮我做这件事。

Div之间使用拖放进行信息传递

0 个答案: