国内优秀的网站,如何打开网页,微信营销平台哪个好,昆明网站建设工作室有哪些先介绍一下html5的drag属性,拖放#xff08;Drag 和 drop#xff09;是 HTML5 标准的组成部分。想要启用drag#xff0c;只要给元素加上draggabletrue就行了#xff08;Safari 5.1.2除外#xff09;。 实际效果#xff1a; 拖动事件(了解事件详情) 事…先介绍一下html5的drag属性,拖放Drag 和 drop是 HTML5 标准的组成部分。想要启用drag只要给元素加上draggabletrue就行了Safari 5.1.2除外。 实际效果 拖动事件(了解事件详情) 事件分为两类当前拖动的元素上的事件以及要放置的位置接收到的事件。 一.发生在拖动元素上的事件
事件名 触发时机 触发次数 dragstart 当拖动开始时触发一次 1 drag 拖动开始后反复触发 n dragend 拖动结束后触发一次 二.发生在目标元素上的事件
事件名 触发时机 触发次数 dragenter 当拖动元素进入目标时触发一次 1 dragover 当拖动元素在目标元素范围内时反复触发 n drop 拖动元素在目标元素内释放时(在设置了dropover事件的前提下) 1 信息传递
在拖动元素时可以设置传递的信息 event.dataTransfer.setData(“te”, “sss); 两个参数第一个参数key第二个参数value。 注意只能传递字符串和url但是在firefox使用text或Text作为key时会打开新的标签页所以不要用他们作为key。 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle*{list-style: none;margin: 0;padding: 0;}#container{width: 500px;margin: 100px auto;}.ele {width:100%;height: 40px;border: 1px solid #999;background: cadetblue;margin-top: 2px;border-radius: 10px;padding-left: 10px;color: white;cursor: move;}/style
/head
body
ul idcontainerli classele draggabletrue1/lili classele draggabletrue2/lili classele draggabletrue3/lili classele draggabletrue4/li
/ul
scriptvar node document.querySelector(#container);var draging null;//使用事件委托将li的事件委托给ulnode.ondragstart function(event) {//console.log(start);//firefox设置了setData后元素才能拖动//event.target出发事件的元素event.dataTransfer.setData(te, event.target.innerText); //不能使用textfirefox会打开新tab//event.dataTransfer.setData(self, event.target);draging event.target;}node.ondragover function(event) {//console.log(onDrop over);//取消默认行为event.preventDefault();var target event.target;//因为dragover会发生在ul上所以要判断是不是liif (target.nodeName LI) {if (target ! draging) {//getBoundingClientRect()用于获取某个元素相对于视窗的位置集合var targetRect target.getBoundingClientRect();var dragingRect draging.getBoundingClientRect();if (target) {if (target.animated) {return;}}if (_index(draging) _index(target)) {//nextSibling 属性可返回某个元素之后紧跟的节点处于同一树层级中。target.parentNode.insertBefore(draging, target.nextSibling);} else {target.parentNode.insertBefore(draging, target);}_animate(dragingRect, draging);_animate(targetRect, target);}}}//获取元素在父元素中的indexfunction _index(el) {var index 0;if (!el || !el.parentNode) {return -1;}//previousElementSibling属性返回指定元素的前一个兄弟元素相同节点树层中的前一个元素节点。while (el (el el.previousElementSibling)) {//console.log(el);index;}return index;}function _animate(prevRect, target) {var ms 300;if (ms) {var currentRect target.getBoundingClientRect();//nodeType 属性返回以数字值返回指定节点的节点类型。1元素节点 2属性节点if (prevRect.nodeType 1) {prevRect prevRect.getBoundingClientRect();}_css(target, transition, none);_css(target, transform, translate3d( (prevRect.left - currentRect.left) px, (prevRect.top - currentRect.top) px,0));target.offsetWidth; // 触发重绘//放在timeout里面也可以// setTimeout(function() {// _css(target, transition, all ms ms);// _css(target, transform, translate3d(0,0,0));// }, 0);_css(target, transition, all ms ms);_css(target, transform, translate3d(0,0,0));clearTimeout(target.animated);target.animated setTimeout(function() {_css(target, transition, );_css(target, transform, );target.animated false;}, ms);}}//给元素添加stylefunction _css(el, prop, val) {var style el el.style;if (style) {if (val void 0) {//使用DefaultView属性可以指定打开窗体时所用的视图if (document.defaultView document.defaultView.getComputedStyle) {val document.defaultView.getComputedStyle(el, );} else if (el.currentStyle) {val el.currentStyle;}return prop void 0 ? val : val[prop];} else {if (!(prop in style)) {prop -webkit- prop;}style[prop] val (typeof val string ? : px);}}}
/script
/body
/html
