网站源码在哪里,seo营销方法,网站收录目录源码,苏州做网站费用明细在页面中设置2个框#xff1a;一个是被拖放的框#xff0c;一个是拖放的目的地框。在拖动的时候#xff0c;只有当鼠标位于拖放的目的地框上方的时候#xff0c;放开鼠标的时候#xff0c;被拖放的框#xff0c;才被移动到鼠标所在的位置#xff1b;而在其他地方放开鼠标…在页面中设置2个框一个是被拖放的框一个是拖放的目的地框。在拖动的时候只有当鼠标位于拖放的目的地框上方的时候放开鼠标的时候被拖放的框才被移动到鼠标所在的位置而在其他地方放开鼠标的时候被拖放的框都要返回原来的位置即拖放之前的位置。要显示拖放过程即拖动过程中被拖放的框要和鼠标一起移动。
1.实施效果 2.代码实现
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.drag {width: 50px;height: 50px;background: #1fbb8a;border-radius: 10px;float:right;text-align: center;line-height: 50px;}.target {width: 300px;height: 300px;border: 1px dashed #000;background: #9ff1ff;text-align: center;line-height: 135px;top: 0;right: 0;}/style/headbodydiv classtargettarget/divdiv classdrag draggabletruedrag/divscriptvar drag document.getElementsByClassName(drag)[0],target document.getElementsByClassName(target)[0];target.addEventListener(dragover, function (e) {e.preventDefault();//需要阻止dragover的默认行为才会触发drop事件// console.log(dragover);})target.addEventListener(drop, function () {this.appendChild(drag);})/script
/body/html
