html5实践篇之drap and drop

最新推荐文章于 2022-10-10 17:03:13 发布

weixin_30745553

最新推荐文章于 2022-10-10 17:03:13 发布

阅读量130

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/swan1014/p/7500872.html

版权

最近几天在瞎忙，耽搁不少时间，今天就把HTML5拖放实际操作，下面就是我编写全过程。

根据前几天复习掌握的HTML5 drap and drop 我今天就动手编写下。

首先，要实现的功能是，模块1拖放到模块2里并且每次拖放都会进行级数并显示出文本。

最终显示的效果如下：

下面直接贴代码吧！

<!DOCTYPE>
<html>
    <head>
        <title></title>
        <meta chartset="utf-8">
        <style type="text/css">
        body{
            margin: 20px auto;
            padding: 20px;
        }
        #div1,#div2{
            float: left;
        }
        .drap{
            width:100px;
            height: 100px;
            border: 1px solid #aaaaaa;
            margin: 10px;
            text-align: center;
            line-height: 100px;
        }
       .drop{
            width:380px; 
            height: 380px; 
            border: 1px solid #aaaaaa; 
            margin: 10px;
            padding: 20px;
       }
        </style>
        <script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script>
        <script type="text/javascript">
        $(function() {
            $("#div1")[0].ondragstart = function (event) {
                console.log("dragStart");
                event.dataTransfer.setData("text", event.target.id);
            };
            /*
            当放置被拖数据时，会发生 drop 事件。 
            调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开） 
            */
            $("#div2")[0].ondrop = function (event) {
                console.log("onDrop");
                var id = event.dataTransfer.getData("text");
                $(this).append($("#" + id).clone().text($(this).find("div").length));
                event.preventDefault();
            };
            /*
            ondragover 事件规定在何处放置被拖动的数据。 
            默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
            */
            $("#div2")[0].ondragover = function (event) {
                console.log("dragOver");
                event.preventDefault();
            };
            $("#div2")[0].ondragenter = function (event) {
                console.log("dragEnter");
            };
            $("#div2")[0].ondragleaver = function (event) {
                console.log("dragLeave");
            };
            $("#div2")[0].ondragend = function (event) {
                console.log("dragEnd");
            };
        });
        </script>
    </head>
    <body>
        <div id="div1" class="drap" draggable="true"></div>
        <div id="div2" class="drop"></div>
    </body>
</html>

　　最后检查无误后见代码提交到githup上https://github.com/xiaomion/HTML5，命令如下：

转载于:https://www.cnblogs.com/swan1014/p/7500872.html

weixin_30745553

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5实践篇之drap and drop

最近几天在瞎忙，耽搁不少时间，今天就把HTML5拖放实际操作，下面就是我编写全过程。根据前几天复习掌握的HTML5 drap and drop 我今天就动手编写下。首先，要实现的功能是，模块1拖放到模块2里并且每次拖放都会进行级数并显示出文本。最终显示的效果如下：下面直接贴代码吧！<!DOCTYPE><html> <head...
复制链接

扫一扫