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代替。

我需要发布从拖放中填充的坐标

1 个答案: