JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例

下面我将为你讲解JS实现鼠标拖拽盒子移动及右键点击盒子消失效果的完整攻略。

1. 鼠标拖拽盒子移动实现

1. 首先，在HTML代码中准备一个盒子元素，例如：

<div id="box"></div>

1. 在CSS中为该盒子设置样式，使其成为一个带边框、背景色的方块：

#box {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    background-color: #ccc;
}

1. 在JS中为盒子添加鼠标按下、鼠标移动、鼠标松开三个事件监听器，实现拖拽效果：

var box = document.getElementById('box');
var x = 0;
var y = 0;
var isDragging = false;

box.addEventListener('mousedown', function (e) {
    x = e.offsetX;
    y = e.offsetY;
    isDragging = true;
});

box.addEventListener('mousemove', function (e) {
    if (isDragging) {
        box.style.left = (e.clientX - x) + 'px';
        box.style.top = (e.clientY - y) + 'px';
    }
});

box.addEventListener('mouseup', function (e) {
    isDragging = false;
});

在以上代码中，分别定义了盒子元素、鼠标按下时鼠标在盒子内的坐标、拖拽状态三个变量。然后给盒子添加了三个事件监听器，分别在鼠标按下、移动、松开时触发相应的处理。在鼠标按下时，记录鼠标在盒子内的坐标，并把拖拽状态标记为true。在鼠标移动时，如果当前处于拖拽状态，则计算出盒子应该移动到的新位置，并设置left和top属性实现移动。在鼠标松开时，取消拖拽状态。

2. 右键点击盒子消失效果实现

1. 在之前的HTML代码中，给盒子元素添加一个右击菜单：

<div id="box" oncontextmenu="return false;">
    右键点击我消失
    <div id="menu" style="display:none;">
        <ul>
            <li>确定</li>
            <li>取消</li>
        </ul>
    </div>
</div>

在以上代码中，利用oncontextmenu事件取消了右击菜单的默认行为，并添加了一个id为menu的菜单元素。

1. 在CSS中设置菜单的样式，使其显示在鼠标点击位置：

#menu {
    position: absolute;
    left: 0;
    top: 0;
}

#menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #fff;
    border: 1px solid #000;
}

#menu li {
    padding: 5px;
    cursor: pointer;
}

#menu li:hover {
    background-color: #ccc;
}

在以上代码中，将菜单的position属性设置为absolute，使其相对于父元素进行定位。然后给菜单的li元素设置鼠标悬停时的背景色。

1. 在JS中为盒子添加右键点击事件监听器，根据点击位置显示菜单，并处理菜单的点击事件：

var box = document.getElementById('box');
var menu = document.getElementById('menu');

box.addEventListener('contextmenu', function (e) {
    e.preventDefault();  // 阻止默认右键菜单的出现
    menu.style.display = 'block';
    menu.style.left = e.clientX + 'px';
    menu.style.top = e.clientY + 'px';
});

menu.addEventListener('click', function (e) {
    var target = e.target;
    if (target.tagName === 'LI') {
        if (target.innerText === '确定') {
            box.style.display = 'none';
        }
        menu.style.display = 'none';
    }
});

在以上代码中，定义了盒子元素和菜单元素两个变量。给盒子添加了contextmenu事件监听器，阻止默认右键菜单的出现，并将菜单显示在鼠标点击的位置。在菜单的click事件监听器中，判断点击的是哪个li元素，如果是确定，则隐藏盒子。如果不是确定，或者点击在菜单外部，则隐藏菜单。