微客导航 » 文章资讯 » js css3实现图片拖拽效果

js css3实现图片拖拽效果

2024-02-28 07:48:04 165

本文实例为大家分享了css3实现图片拖拽效果的具体代码，供大家参考，具体内容如下








body{
text-align:center;
}
.container{
display:flex;
justify-content:center;
}
.colorBox{
width:100px;
height:100px;
border:1pxsolidgray;
margin:020px;
}
.showBox{
width:100px;
height:100px;
border:5pxdashedgray;
margin:0auto;
}
.colorBox:nth-child(1){
background-color:orange;
}
.colorBox:nth-child(2){
background-color:skyblue;
}
.colorBox:nth-child(3){
background-color:yellowgreen;
}
img{
border:1pxsolidgray;
margin:020px;
}





支持拖拽的元素



需要开启拖拽的元素

展示框

//定义全局变量保存拖放元素 varmoveDom; //让元素能够被拖放的内容丢进去 document.querySelector('.showBox').ondragover=function(e){ //防止浏览器默认行为(W3C) e.preventDefault(); } //拖放元素丢到容器内会触发ondrop事件 //如果没有在ondragover中阻止默认行为那么无法触发ondrop事件 document.querySelector('.showBox').ondrop=function(){ //console.log(moveDom); if(moveDom.src){ //如果src有值那么设置src属性 //获取moveDom的src属性并赋值给盒子即可 this.style.background='url('+moveDom.src+')no-repeatcenter/cover'; }else{ //如果src没有值那么设置背景颜色 //console.log(moveDom); //console.log(moveDom.style.backgroundColor); //该方法返回的内容是style属性 //getComputedStyle能够获取style标签中写的样式 console.log(window.getComputedStyle(moveDom).backgroundColor); this.style.backgroundColor=window.getComputedStyle(moveDom).backgroundColor; } } //当我们开始拖放元素的时候会触发ondragstart事件 varimgs=document.querySelectorAll('img'); for(vari=0;i

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

js css3实现图片拖拽效果

支持拖拽的元素

需要开启拖拽的元素

展示框

热门推荐

随机推荐