jQuery拖放可排序

jQuery drag and drop with sortable

本文关键字：排序拖放 jQuery 更新时间：2023-09-26

我在尝试使用某些拖放元素上的可排序元素从 JS 中获取数组时遇到问题。可以在以下位置找到工作演示：

例

我需要实现什么：

在图像上拖动项目，获取 x，y（完成）
放置完所有项目后，使用 jQuery sortable？获取具有 x，y 坐标的 id 数组。

array（23456->{XPOS：234，YPOS：234}，23456->{XPOS：234，YPOS：234},....等

我不确定如何将可排序对象绑定到仅放在图像上的项目，然后将这些值放入数组中

这是到目前为止的代码：

jQuery(function($){
$('.dragThis').bind('click', function(){
        $(this).css("border","3px solid #fff");
        $(this).draggable({
                            containment: $('body'),
                            drag: function(){
                                    $('#dropHere').droppable({
                                        accept: '.dragThis',
                                        over : function(){
                                        $(this).animate({'border-width' : '3px', 'border-color' : '#0f0'}, 500);
                                        }
                                    });
                                },
                            stop: function(){
                                    var position = $(this).position();
                                    var parentPos = $('#dropHere').offset();
                                    var xPos = position.left - parentPos.left;
                                    var yPos = position.top - parentPos.top;
                                    var finalOffset = $(this).position();
                                    var finalxPos = xPos;
                                    var finalyPos = yPos;
                                    $('#finalX').text('Final X: ' + finalxPos);
                                    $('#finalY').text('Final Y: ' + finalyPos);
                                    //$('.dragThis').sortable();
                                    console.log (finalxPos,finalyPos,$(this).attr("id"));
                                },
                            revert: 'invalid'
                            //connectToSortable: '#dropHere'
        });
    });
});

任何指向正确方向的帮助，将不胜感激。为了澄清，我将通过 AJAX 将值写入数据库以供稍后调用。

提前致谢

简单的解决方案：

在它们自己的"drop"事件上为这些元素添加一个类，然后让所有这些元素都有一个带有选择器的类。
之后，方便的$.fn.each()和$.fn.offset()会有所帮助。
然后，您可以使用top、left而不是您提到的xpos、ypos来处理这些坐标。

下面是一个示例：

var coordinates = {};
$(".dropped").each(function(item) {
    coordinates[$(item).attr("id")] = $(item).offset();
});