zoukankan      html  css  js  c++  java
  • drag And drop

    <!DOCTYPE HTML>
    <html>
    <head>
    
    
    <style type="text/css">
    	div{
    		height: 300px;
    		 300px;
    		border:1px solid #ccc;
    	}
    </style>
    
    <div id="drop1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div id="drop2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <img src="http://via.placeholder.com/350x150" draggable="true" ondragstart="drag(event)" id="origin">
    <!-- 要使元素是可以拖动的,必须加上draggable="true"  -->
    
    <script type="text/javascript">
    function drag(event){
    	event.dataTransfer.setData('text',event.target.id);
    }
    function drop(event){
            event .preventDefault();
    	var data = event.dataTransfer.getData('text');
    	console.log(event)
    	event.target.appendChild(document.getElementById(data));
    }
    function allowDrop(event){
    	event.preventDefault();
    }
    </script>
    </body>
    </html>
    
    


    使元素可拖动
    首先:要使元素可拖动,请将draggable属性设置为true:


    拖动什么 - ondragstart和setData()
    然后,指定拖动元素时应该发生的事情。

    在上面的示例中, ondragstart属性调用一个函数drag(event),该函数指定要拖动的数据。

    dataTransfer.setData()方法设置数据类型和拖动数据的值:

    function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
    }
    在这种情况下,数据类型是“text”,值是可拖动元素的id(“drag1”)

    哪里下降 - ondragover
    ondragover事件指定可以删除拖动数据的位置。

    默认情况下,不能在其他元素中删除数据/元素。 要允许删除,我们必须阻止元素的默认处理。

    这是通过调用ondragover事件的event.preventDefault()方法完成的:

    event .preventDefault()


    function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
    }
    代码解释:

    调用preventDefault()以防止浏览器默认处理数据(默认情况下打开为drop on link)
    使用dataTransfer.getData()方法获取拖动的数据。 此方法将返回在setData()方法中设置为相同类型的任何数据
    拖动的数据是拖动元素的id(“drag1”)
    将拖动的元素追加到drop元素中

  • 相关阅读:
    条件变量:为什么要与互斥锁配套使用?为什么要使用while来避免虚假唤醒?
    【转】高性能IO之Reactor模式
    LeetCode127:单词接龙
    CF1245F: Daniel and Spring Cleaning
    权值线段树学习笔记
    luogu_4317: 花神的数论题
    luogu_2605: 基站选址
    入门平衡树: Treap
    CF1244C: The Football Season
    luogu_1156: 垃圾陷阱
  • 原文地址:https://www.cnblogs.com/cyany/p/9467968.html
Copyright © 2011-2022 走看看