HTML5 drag拖放过程详析

最新推荐文章于 2024-03-28 22:49:04 发布

d lt's me

最新推荐文章于 2024-03-28 22:49:04 发布

阅读量284

点赞数

分类专栏： js 文章标签： html5 js

本文链接：https://blog.csdn.net/d649237053/article/details/80718798

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1，，，首先你要确定拖动元素：即你要让他能够拖动

设置 draggable=“true”；

2，，，你要知道你要拖动什么：这时候ondragstart要上场了，用它来设置要拖动的东西（属性）

οndragstart=“function（event）{

ev.dataTransfer.setData（“Text”，ev.target.id）;

}”dataTransfer.setData（）这就像一个媒介来让你们认识不然怎么有后来的发展是不是

3，，，放在什么地方哪？他允许你放吗？放了之后那干什么？

因为浏览器有自己的模式：元素内不允许放其它元素或数据，所以那我要阻止他

ondragover“function（event）{

ev.preventDefault();

}”

a；；允许放置后浏览器还有自己的模式（就是考验你，对不对我足够好）：放置的元素以链接的形式显示。

b；；对于被添加的元素要知道是谁要添加，这就需要媒介来告诉了，要不然谁知道你是谁；然后就见面了

c；；然后就见面了，对上眼了，所以就在一起了，

ondrop"function (event){

ev.preventDefault();

var data=dataTransfer.getData（“Text”);//不知道这个方法请点击点击打开链接

ev.target.appendChild(document.getElementById(data));

下面是demo：

<html>
<meta charset="utf-8">
    <head><title>...</title>
        <style>
       #p1{
           font-size: 20px;
           color: red;
       }
       #div1{
           width: 200px;
           height: 200px;
           border: 2px solid yellow;
       }
        </style>
        <script type="text/javascript">
        function drag(ev){
            ev.dataTransfer.setData("Text",ev.target.id);

        }
        function allow(ev){
            ev.preventDefault();//因为默认的是不允许放置其它元素或数据所以要阻止其默认情况
        }
       function drop(ev){
        ev.preventDefault();//因为放置的元素浏览器默认是以链接的形式打开所以要阻止默认方式
        var data=ev.dataTransfer.getData("Text");//通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
         ev.target.appendChild(document.getElementById(data));
       }
        </script>
       
    </head>
<!--测试拖放
-->
<body>
  <div id="div1" ondrop="drop(event)" ondragover="allow(event)"></div>
  <p>请把下面的文字拖放到方框中</p>
   <p id="p1" ondragstart="drag(event)" draggable="true">我爱你  哈哈</p>
</body>
</html>