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

Question

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

我的 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>

我的 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>

Answer 1

如果你想在一次拖动过程中获取所有项目的位置，那么你必须手动选择它们，并处理它们:

$('.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 应该是唯一的，因此应该更改它们。或者，您应该使用name。