首页 > 代码库 > 基于html5实现的简单拖放

基于html5实现的简单拖放

2024-09-13 22:54:16   217人阅读

h5新增了关于拖放的API，通过拖放API可以让html页面的任何元素都变成可以拖动的。这是一个小例子，帮助理解。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="author" content="dongfeng">
        <title>html5拖拽</title>
        <style>
            #sourse{
                width: 200px;
                height: 200px;
                background: red;
            }
        </style>
    </head>
    <body>
        <a href="">baidu</a>
        <div id="sourse" draggable="true"></div>
        <script>
        var div = document.getElementById(‘sourse‘);
        div.ondragstart=function(e){
e.dataTransfer.setData(‘text/plain‘,‘‘);
        }
        document.ondragover=function(e){
            return false
        }
        document.ondrop=function(e){
div.style.position=‘absolute‘;
div.style.left=e.pageX+‘px‘;
div.style.top=e.pageY+‘px‘;
return false
        }
        </script>
    </body>
</html>

 

基于html5实现的简单拖放


联系
我们