码迷,mamicode.com
首页 > 其他好文 > 详细

表格单元格间数据的拖拽

时间:2015-10-18 00:53:31      阅读:171      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE HTML>
<html>
<style>
    td{
        border:1px solid #444;
        padding:20px;
        width:100px;
        height:50px;
    }
    td div{
        cursor:pointer;
    }
    table{
       
    }
</style>
 
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
<body>
        <p>asldflasl</p>
    <table>
        <tr>
            <th>
            a
            </th><th>
b
</th><th>
c
</th><th>
d
</th><th>
   e
</th>
        </tr>
        <tr>
            <td class="mytd" ondrop="drop(event)" ondragover="allowDrop(event)">
                <div id="div1" class="tablediv" draggable="true" ondragstart="drag(event)" >1111111</div>
            </td>
            <td class="mytd" ondrop="drop(event)" ondragover="allowDrop(event)">
                <div id="div2" class="tablediv" draggable="true" ondragstart="drag(event)" >2222222</div>
            </td>
            <td class="mytd" ondrop="drop(event)" ondragover="allowDrop(event)">
                <div id="div3" class="tablediv" draggable="true" ondragstart="drag(event)" >333333333</div>
            </td>
            <td class="mytd" ondrop="drop(event)" ondragover="allowDrop(event)">
                <div id="div4" class="tablediv" draggable="true" ondragstart="drag(event)" >4444444444</div>
            </td>
            <td>
                <div class="tablediv">555555555555</div>
            </td>
        </tr>
    </table>


</body>
</html>

表格单元格间数据的拖拽

标签:

原文地址:http://www.cnblogs.com/lunawzh/p/4888625.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!