js移入和移出

最新推荐文章于 2024-05-30 15:25:18 发布

li905663280

最新推荐文章于 2024-05-30 15:25:18 发布

阅读量916

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/li905663280/article/details/84888520

版权

javascript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

js移出和移入

<DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge" >
     <meta name="renderer" content="webkit" >
     <title>index</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
     <style>
         .container {
             width: 200px;
             height: 100px;
             margin-top: 20px;
             border: 1px solid #000;
         }
     </style>
     <script type="text/javascript">
         $(function () {
 
             //开始
             $('#drag1').on('dragstart', function (e) {
                 e.originalEvent.dataTransfer.setData('text',e.target.id);
             });
             //进入目标元素
             $('.container').on('dragenter', function (e) {
                 e.preventDefault();
             });
             //在目标元素上移动
             $('.container').on('dragover', function (e) {
                 e.preventDefault();
             });
             //移出目标元素
             $('.container').on('dragleave', function () {
             });
 
             //被拖拽元素被放置在目标元素上
             $('.container').on('drop', function (ev) {
                 //阻止默认行为
                 ev.preventDefault();
                 //阻止默认行为
                 ev.stopPropagation();
                var data=ev.originalEvent.dataTransfer.getData("Text");   
                ev.target.appendChild(document.getElementById(data));
             });
 
             //拖拽结束
             $('drag1').on('dragend', function (ev) {
             });
         })
     </script>
     <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>
 </head>
 <body>
 <p>请把 W3School 的图片拖放到矩形中：</p>
 <div class="container" >
    
 </div>

 <div class="container" style="margin-top: 50px">
<img id="drag1" src=" http://www.w3school.com.cn/i/eg_dragdrop_w3school.gif" draggable="true" ondragstart="drag(event)" />
 </div>


 </body>
 </html>

li905663280

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js移入和移出

js移出和移入&lt;DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta http-equiv="X-UA-COMPATIBLE" content="IE=edge" &gt; &amp
复制链接

扫一扫