网站建设站点,化州网站建设公司,会展公司排名,做网站需要编码吗元素在拖放过程中触发的事件 HTML5中#xff0c;只要将元素的 draggable 属性设置为 true 就可以实现拖放功能#xff0c;在拖放过程中#xff0c;触发了多个事件#xff0c;如下#xff1a;
dragstart:事件主体是被拖放元素#xff0c;在开始拖放被拖放元素时触发。dra…元素在拖放过程中触发的事件 HTML5中只要将元素的 draggable 属性设置为 true 就可以实现拖放功能在拖放过程中触发了多个事件如下
dragstart:事件主体是被拖放元素在开始拖放被拖放元素时触发。drag事件主体是被拖放元素在正在拖放被拖放元素时触发。dragenter事件主体是目标元素在被拖放元素进入某元素时触发。dragover事件主体是目标元素在被拖放在某元素内移动时触发。dragleave事件主体是目标元素在被拖放元素移出目标元素是触发。drop事件主体是目标元素在目标元素完全接受被拖放元素时触发。dragend事件主体是被拖放元素在整个拖放操作结束时触发。
以上我们看到拖动总共有7个事件其中事件主体是拖放元素的是dragstart开始拖动 、drag正在拖放、dragend拖放结束其他4个事件主体都是目标元素进入、移动、离开、完全进入四个状态。!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleHTML5实现拖拽操作/titlestyle.album {border: 3px dashed #ccc;float: left;margin: 10px;min-height: 100px;padding: 10px;width: 220px;}img {width: 200px;height: 50px;}/style
/headbodydiv idinfoh2可将照片直接拖到垃圾箱中/h2/divdiv idalbum classalbumh2相册/h2img draggabletrue idimg1 src./1.jpg /img draggabletrue idimg2 src./2.jpg /img draggabletrue idimg3 src./1.jpg //divdiv idtrash classalbumh2回收站/h2/divscript// function init() {var info document.getElementById(info);var src document.getElementById(album);//开始拖放操作src.ondragstart function (e) {console.log(ssssssssssdddd, e, e.target.id);var dragImgId e.target.id;//获得被拖动元素var dragImg document.getElementById(dragImgId);//拖放操作结束dragImg.ondragend function (e) {info.innerHTML 可将照片直接拖到回收站;};e.dataTransfer.setData(text, dragImgId);};//拖放过程中src.ondrag function (e) {info.innerHTML 照片正在被拖动;}//获得拖放的目标元素var target document.getElementById(trash);//取消默认事件target.ondragenter function (e) {e.preventDefault();}target.ondragover function (e) {e.preventDefault();}target.ondrop function (e) {var draggedID e.dataTransfer.getData(text);//获取相册中的DOM对象var oldElem document.getElementById(draggedID);//从相册DIV中删除该照片的节点oldElem.parentNode.removeChild(oldElem);//将被拖动的照片DOM节点添加到垃圾桶DIV中target.appendChild(oldElem);info.innerHTML 可将照片直接拖到回收站;e.preventDefault();}// }/script
/body/html
