网站建设开题报告中的问题,中国企业500强榜单2021,北京网站建设w亿玛酷1专注,wordpress阿里云配置文件这是2个组合事件
dom对象分源对象和目标对象
绑定的事件也是分别区分源对象和目标对象 事件绑定 事件顺序
被拖拽元素#xff0c;事件触发顺序是 dragstart-drag-dragend#xff1b;
对于目标元素#xff0c;事件触发的顺序是 dragenter-dragover-drop/…这是2个组合事件
dom对象分源对象和目标对象
绑定的事件也是分别区分源对象和目标对象 事件绑定 事件顺序
被拖拽元素事件触发顺序是 dragstart-drag-dragend
对于目标元素事件触发的顺序是 dragenter-dragover-drop/dropleave。
其中drag和dragover会分别在源元素和目标元素反复触发。整个流程一定是dragstart第一个触发dragend最后一个触发。
这里还有一个注意的点如果某个元素同时设置了dragover和drop的监听那么必须阻止dragover的默认行为否则drop将不会被触发。 问题
drop事件里面的e.offsetY会收到目标对象内部的子节点影响如果在目标节点的子节点上是否标签拿到是相对子节点内部的xy距离。
修复
dragstart回调中给所有目标对象的子简单添加样式pointerEventsnone让他们不会接受任何事件dragend的时候恢复所有对象目标子节点的样式为pointerEventsautodemo:
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}.wrap {height: 400px;overflow: auto;background-color: beige;}.inner {height: 1900px;position: relative;}.draggable {bottom: 10px;right: 10px;width: 100px;height: 100px;background-color: rebeccapurple;position: fixed;}.inner_box {top: 1800px;right: 10px;width: 100px;height: 100px;background-color: rebeccapurple;position: absolute;}/style
/headbodydiv classwrapdiv classinnerdiv classinner_box/div/div/divdiv draggabletrue classdraggable/divscriptconst inner document.querySelector(.inner);const source document.querySelector(.draggable)const inner_boxdocument.querySelector(.inner_box);inner.addEventListener(dragover, (e) {e.preventDefault();console.log(e.offsetY over, e.offsetY, e.target)});inner.dragenter function (e) {console.log(e enter, e.offsetY)}//源目标开始拖拽时候source.addEventListener(dragstart, (e) {console.log(e start, e.offsetY)//inner_box.style.pointerEventsnone;});inner.ondrop function (e) {console.log(e, e.offsetY)}/script
/body/html
参考
看完就懂的前端拖拽那些事 - 掘金
HTML 拖放Drag and Drop入坑实战总结篇 - 掘金
两个事件直接传递数据
DataTransfer
参考https://www.cnblogs.com/guo-siqi/p/16358323.html
