js小球拖拽复制多个小球
时间: 2023-05-22 19:05:22 浏览: 88
答案:
您可以使用JavaScript和HTML5的拖放API来实现小球拖拽复制的功能。首先,您需要创建一个小球元素,并将其绑定到mousedown、mousemove和mouseup事件。在mousedown事件中,将小球元素克隆并将其添加到页面中。在mousemove事件中,跟随鼠标移动小球并实现拖拽效果。在mouseup事件中,释放小球并放置在页面上。可以使用setInterval或requestAnimationFrame函数来实现持续的拖拽效果。
代码示例:
HTML:
<div id='container'>
<div class='ball'></div>
</div>
CSS:
.ball {
width: 50px;
height: 50px;
background-color: red;
border-radius: 50%;
position: absolute;
}
JavaScript:
var ball = document.querySelector('.ball');
var container = document.querySelector('#container');
var isDragging = false;
ball.addEventListener('mousedown', function(event) {
isDragging = true;
var clone = this.cloneNode(true);
container.appendChild(clone);
clone.style.left = this.offsetLeft + 'px';
clone.style.top = this.offsetTop + 'px';
});
document.addEventListener('mousemove', function(event) {
if (isDragging) {
var clone = document.querySelector('.ball:last-child');
clone.style.left = event.pageX + 'px';
clone.style.top = event.pageY + 'px';
}
});
document.addEventListener('mouseup', function(event) {
isDragging = false;
});