这段代码展示了如何在HTML中创建一个可拖动的按钮，并在鼠标点击和拖动时触发相应事件。当右键点击时，会出现一个菜单，可以通过移动鼠标来调整其位置。这个例子涉及到网页元素的定位、事件监听以及防止默认右键菜单显示。
*{
margin: 0;
padding: 0;
}
#but{
position: absolute;
top:50%;
left: 50%;
transform:translate(-50%,-50%);
height: 100px;
width: 100px;
}
html, body{
width: 100%;
height: 100%;
}
#munue{
width: 100px;
position: fixed;/*//固定定位*/
text-align: center;
background: #fbeeb0;
display: none;
}
td:hover{
transition:all 1s;
background: #6fbfff;
}
.n{
border: 0.5px solid #ffffff;
list-style: none;
background: #fbeeb0;
}
.n:hover{
transition: all 1s;
background: #31aecc;
}
- 查看图片
- 个性设置
- 排序方式
- 新建
点我试试
var but=document.querySelector("#but");
but.draggable=true;
but.οnclick=function(e){
console.log(e);
}
but.οndrag=function(argument){
alert(111);
}
document.body.οncοntextmenu= function(e){
e.preventDefault() //取消冒泡
e.stopPropagation;//取消浏览器默认行为
munue.style.top= e.clientY+"px"
munue.style.left= e.clientX+"px"
munue.style.display="block";
document.body.οnclick=function(){
munue.style.display="none";
}
//debugger;
}
一键复制
编辑
Web IDE
原始数据
按行查看
历史
224
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
