Javascript 我需要发布通过拖放填充的坐标

我能够填充每个元素的坐标，我不知道如何使用jquery$this或每个元素来发布每个列表框的坐标。有人告诉我正确的方向，我在这里有点迷路了

        $('.items').draggable({
            containment: '#container',
            cursor: 'move',
            drag: function() {
                var offset = $(this).offset();
                var xPos = offset.left;
                var yPos = offset.top;
                $(this).text('X : ' + xPos + ' y: ' + yPos);
            }

        });
    </script>

我的HTML

 <div id = "container" >
        <ul>
            <li id="" class="ui-state-highlight items">First name</li>
            <li id="" class="ui-state-highlight items">Middle name</li>
            <li id="" class="ui-state-highlight items">Event name<div id ="posX"></div><div id ="posY"></div></li>
            <li id="" class="ui-state-highlight items">Logo<div id ="posX"></div><div id ="posY"></div></li>
            <li id="" class="ui-state-highlight items">Footer<div id ="posX"></div><div id ="posY"></div></li>
        </ul> 
    </div>

        $('.items').draggable({
            containment: '#container',
            cursor: 'move',
            drag: function() {
                var offset = $(this).offset();
                var xPos = offset.left;
                var yPos = offset.top;
                $(this).text('X : ' + xPos + ' y: ' + yPos);
            }

        });
    </script>

我的javascript

        $('.items').draggable({
            containment: '#container',
            cursor: 'move',
            drag: function() {
                var offset = $(this).offset();
                var xPos = offset.left;
                var yPos = offset.top;
                $(this).text('X : ' + xPos + ' y: ' + yPos);
            }

        });
    </script>

---

如果要在一次拖动过程中获取所有项目的位置，则必须手动选择它们，并对其进行处理：

        $('.items').draggable({
            containment: '#container',
            cursor: 'move',
            drag: function() {
                var offset = $(this).offset();
                var xPos = offset.left;
                var yPos = offset.top;
                $(this).text('X : ' + xPos + ' y: ' + yPos);
            }

        });
    </script>

$('.items').draggable({
    containment: '#container',
    cursor: 'move',
    drag: function() {
        var offset = $(this).offset();
        var xPos = offset.left;
        var yPos = offset.top;
        var childDivs = $(this).children('div');
        /*$(this).text( );
        $(this).text('X : ' + xPos + ' y: ' + yPos);*/
        $(childDivs[0]).text(xPos);
        $(childDivs[1]).text(yPos);

        // get position of other items
        $('.items').not(this).each(function () {
            var otherXPos = $(this).offset().left;
            var otherYPos = $(this).offset().top;
            var otherChildDivs = $(this).children('div');
            $(otherChildDivs[0]).text(xPos);
            $(otherChildDivs[1]).text(yPos);
            /*$(this).text( );
            $(this).text('X : ' + otherXPos + ' y: ' + otherYPos);*/
        });
    }
});

---

注意：您的代码有许多具有相同id属性的div。id应该是唯一的，因此应该更改这些id。或者，您应该改用name。

这听起来像是一个解决方案，但这会引起一个问题，因为我要创建foreach循环来填充列表项并从array@chapskev我猜你指的是身份证？你根本不需要身份证。我会更新我的答案来做我认为你想做的事情。这很有帮助：尽管我仍然无法发布每个人的个人坐标element@chapskev如果您想提交数据，那么您需要将其放入某种表单字段中，而不是div，例如隐藏输入。

        $('.items').draggable({
            containment: '#container',
            cursor: 'move',
            drag: function() {
                var offset = $(this).offset();
                var xPos = offset.left;
                var yPos = offset.top;
                $(this).text('X : ' + xPos + ' y: ' + yPos);
            }

        });
    </script>