触摸设备h5 拖动好友道不同分组类似效果

Question

页面有几个按钮，点击按钮对应弹开列表，列表项可以从当前列表拖到另一个列表里面。

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

这是一个简单的jQuery实现，它使用了.drag和.drop事件来模拟拖放的效果。首先，你需要在HTML中创建一些按钮：

<button id="btnl">Button 1</button>
<button id="btn2">Button 2</button>

然后，在CSS中设置样式：

.drag {
  position: relative;
  width: 60px;
  height: 40px;
}
.drop {
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 40px;
  background-color: #f00;
}

接下来是jQuery代码：

$(document).ready(function() {

    var $btns = $('button');

    // 鼠标按下时开始拖动
    $('.drag').mousedown(function(e) {
        e.preventDefault();
        var rect = $(this).get(0).getBoundingClientRect();
        var x = e.clientX - rect.left;

        // 获取要放置的元素索引
        var targetIndex = parseInt(x / 40);

        if (targetIndex < 0 || targetIndex > $btns.length - 1) return;

        // 创建一个临时对象用于存放数据
        var data = {
            btnId: $(this).attr('id'),
            index: targetIndex,
            targetId: $btns.eq(targetIndex).attr('id')
        };

        // 调用drop方法进行拖放操作
        drop(data);
    });

    // 鼠标离开时停止拖动
    $('.drag').mouseup(function() {
        $('.drag').removeData('dropping');
    });

    function drop(data) {
        // 确保目标元素存在
        if (!$('.drop[data-target-id="' + data.targetId + '"]').length) return;

        // 将鼠标位置移动到目标元素上
        $('.drag').draggable({
            start: function() {
                $('.drag').data('dropping', true);
            },
            stop: function() {
                $('.drag').data('dropping', false);
            }
        });

        // 选择目标元素作为接收器
        $('.drop[data-target-id="' + data.targetId + '"]').draggable({
            start: function() {
                this.data('dropped', true);
            },
            drag: function() {
                this.data('dropped', false);
            },
            stop: function() {
                this.data('dropped', false);
            }
        });

        // 执行拖放操作
        var $source = $('.drag[data-index="' + data.index + '"]');
        var $destination = $('.drop[data-target-id="' + data.targetId + '"]');

        $source.find('[data-draggable]').each(function(index, element) {
            $destination.append($(element));
        });
    }

});

这个代码会将鼠标移动到第一个按钮上，并在其下方添加一个拖放区域。当用户开始拖动时，他们会看到一个新的拖放区域被创建。当他们松开鼠标并移出这个区域时，它们可以继续拖动到其他按钮上。

注意：这个代码只适用于支持touch events的浏览器，如果使用的是传统的mouse event，你可能需要修改代码以适应你的需求。