x使用说明_CSS学习

当前位置：网站建设 > 技术支持

x使用说明_CSS学习

资料来源：网络整理时间：2023/3/4 7:31:45 共计：3607 浏览

x使用说明？

<title>Document</title>

<style>

#item{

width:100px;

height: 100px;

background:red;

}

#wrapper{

height: 300px;

width: 300px;

border: 2px solid #000;

margin-top: 20px;

}

</style>

</head>

<body>

<div id="item" draggable="true">被拖拽元素</div>

var item = document.getElementById('item')

var wrapper = document.getElementById('wrapper');

/**

* 拖拽开始是触发的事件；

item.addEventListener('dragstart',function(){

console.log('dragstart');

})

/**

* 拖拽结束时触发的事件

item.addEventListener('dragend',function(){

console.log('dragend');

})

/**

* 被拖拽元素进入目标元素时触发

wrapper.addEventListener('dragenter',function(){

console.log('enter');

})

/**

* 被拖拽元素在目标元素上时触发

wrapper.addEventListener('dragover',function(e){

e.preventDefault();

console.log('over');

})

/**

* 鼠标在目标元素上松开时触发

触发条件：必须在阻止dragover的默认事件

wrapper.addEventListener('drop',function(){

console.log('drop');

})

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：女主叫李安宁的小说是顾漫写的_CSS学习 | ·下一条：本人手小男段位都掉到朔料了_CSS学习