html5简单拖拽实现自动左右贴边+幸运大转盘

HTML5简单拖拽实现自动左右贴边，可以用于很多场景，比如拖拽窗口、拖拽面板等等。在幸运大转盘中，也可以使用拖拽实现奖品的位置调整和排布。

一、设计思路

1、幸运大转盘是一个HTML5应用，所以可以使用HTML5的拖拽特性来实现自动左右贴边；

2、我们可以使用CSS3的transition来添加拖拽的动画效果，使用户操作更加流畅；

3、为了提高用户体验，我们还可以使用JavaScript来添加一些提示信息，让用户知道当前拖拽的位置和状态。

二、实现步骤

1、HTML结构：我们需要在HTML中定义奖品的容器，以及每个奖品的内容。奖品容器使用DIV元素定义，每个奖品使用IMG元素定义。

<div class="prize-container">
    <img src="prize1.jpg">
    <img src="prize2.jpg">
    <img src="prize3.jpg">
    <img src="prize4.jpg">
    <img src="prize5.jpg">
    <img src="prize6.jpg">
    <img src="prize7.jpg">
    <img src="prize8.jpg">
</div>

2、CSS样式：为了实现拖拽效果，我们需要在CSS中定义奖品容器和奖品的样式。奖品容器需要设置为绝对定位，并且设置左右边距。奖品需要设置为浮动元素，并且设置宽度和高度。

.prize-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 400px;
    height: 400px;
    margin-left: -200px;
    margin-right: -200px;
}

.prize-container img {
    float: left;
    width: 50px;
    height: 50px;
    margin: 10px;
    border-radius: 50%;
}

3、JavaScript代码：为了实现拖拽效果，我们需要在JavaScript中定义一些事件处理函数。拖动开始事件会保存当前奖品的位置和鼠标点击位置，拖动过程事件会计算新位置和移动奖品，拖动结束事件会将奖品放置到新位置。

var container = document.querySelector('.prize-container');
var moving = null;
var startX = 0;
var startY = 0;

container.addEventListener('mousedown',function (e) {
    moving = e.target;
    startX = e.clientX;
    startY = e.clientY;
});

document.addEventListener('mousemove',function (e) {
    if (moving) {
        var distanceX = e.clientX - startX;
        var distanceY = e.clientY - startY;
        moving.style.transition = 'none';
        moving.style.transform = 'translate(' + distanceX + 'px,' + distanceY + 'px)';
    }
});

document.addEventListener('mouseup',function (e) {
    if (moving) {
        moving.style.transition = 'transform 0.2s ease-in-out';
        var newLeft = Math.round(moving.offsetLeft / (moving.offsetWidth + 20)) * (moving.offsetWidth + 20);
        moving.style.transform = 'translate(' + newLeft + 'px,0)';
        moving = null;
    }
});

三、效果演示

通过上面的代码，我们就实现了幸运大转盘的简单拖拽，并且可以自动左右贴边。效果如下：

注：演示代码可以在CodePen上查看。