html5新特性,java11新特性

拖拽属性 拖拽属性

H5的新特性 : 是指鼠标点击源对象之后，不松手将其拖拽到目标对象，或半途松手(释放)的过程

拖拽 Drag

源对象： 指定的鼠标点击的一个事物，例如： 一个元素，一个图片等
目标对象： 指定是我们拖动源对象后，预计要进入的区域

被拖动的源对象可以触发的方法 ondragstart: 源对象开始被拖动ondrag: 被拖动过程中ondragend: 源对象被拖动结束 源对象进入目标对象可以触发的事件 ondragenter： 源对象进入目标对象时触发ondragover: 源对象悬停在目标对象上方时触发ondragleave: 源对象被拖动着离开目标对象时触发ondrop: 源对象在目标对象上松手时 触发 拖拽属性 一共就是这7个方法
功能： 用于在源对象和目标对象之间传递数据 setData( ): 设置数据 参数是 key 和 value(value必须是字符串)getData( ): 获取数据，参数是key 。 通过key去获取对应的value值 dataTransfer 注意：
dataTransfer的传输数据必须为字符串类型，所以需要转化数据类型，那么就要使用到JSON方法 // 使用JSON对象中的方法 转换 字符串和对象的数据类型 var str = new String(); var obj = {};// JSON.stringify(对象)：可以将对象类型 转换为字符串类型 console.log(typeof JSON.stringify(obj)); //JSON.parse(字符串)：可以将字符串类型 转换为对象类型console.log(typeof JSON.parse(str)); 注意

标签中自带的属性： draggable 是否可以拖拽，默认值 false

// 例：// 切记开启draggable属性<div class="box" draggable="true"></div><script type="text/javascript">var box = document.getElementsByClassName("box")[0];// 定义全局变量，存储鼠标的位置var offsetX;var offsetY; // 开始拖动时box.ondragstart = function(ev){// 获取鼠标在元素上的位置offsetX = ev.offsetX;offsetY = ev.offsetY;}// 源对象被拖动时box.ondrag = function(ev){var x = ev.clientX;var y = ev.clientY;// drag事件最后一刻，无法读取鼠标的坐标， x 和 y 都会变成0if (x == 0 || y == 0) {return false; // 直接结束，不赋值给元素}x -= offsetX;y -= offsetY;this.style.left = x + "px";this.style.top = y + "px";}// 拖动结束时box.ondragend = function(){console.log(1)}</script>