Question

我正在尝试使用jQuery获取可拖动对象的x和y。

场景是，我正在将一个物体拖放到另一个物体上，并希望获得拖拽和放置物体的位置。放下物体。

编辑：现在我可以获得对象的位置，但我需要更多：

这是我尝试过的：

<script>
$(function() {
    $('#draggable').draggable({
        drag: function() {
            var offset = $(this).offset();
            var xPos = offset.left;
            var yPos = offset.top;
            $(this).text('x: ' + xPos + 'y: ' + yPos);
        }
    });

    $("#droppable").droppable({
        drop: function(event, ui) {
            $(this)
                .addClass("ui-state-highlight")
                .find("p")
                .html("Dropped!");
        }
    });
});
</script>

现在我可以获得可拖动对象的位置，但我需要它可以调整大小，除了获得可拖动的x,y之外，我还需要它的大小。

Answer 1

您可以使用drag事件：

$('#dragThis').draggable({
    drag: function() {
        var offset = $(this).offset();
        var xPos = offset.left;
        var yPos = offset.top;
        $('#posX').text('x: ' + xPos);
        $('#posY').text('y: ' + yPos);
    }
});

JS Fiddle demo

此演示由drag event以及方法offset()和text()提供给您。

<小时/> 已编辑以回应OP的评论，原始问题：

大卫，实际上我需要的是有点复杂，但你可能会提供很大的帮助。我想要做的是在一个面板中放置一个可拖动的对象和一个可放置的图像，然后拖动图像上的可拖动对象并获取它被放置的位置。我还需要可拖动的对象可以调整大小并在最后得到它的大小:)谢谢

......呃，哇 ......

我认为这类涵盖了所要求的基础知识：

$('#dragThis').draggable( {
    containment: $('body'),
    drag: function() {
        var offset = $(this).offset();
        var xPos = offset.left;
        var yPos = offset.top;
        $('#posX').text('x: ' + xPos);
        $('#posY').text('y: ' + yPos);
    },
    stop: function() {
        var finalOffset = $(this).offset();
        var finalxPos = finalOffset.left;
        var finalyPos = finalOffset.top;

        $('#finalX').text('Final X: ' + finalxPos);
        $('#finalY').text('Final X: ' + finalyPos);
    },
    revert: 'invalid'
});

$('#dropHere').droppable({
    accept: '#dragThis',
    over: function() {
        $(this).animate({
            'border-width': '5px',
            'border-color': '#0f0'
        }, 500);
        $('#dragThis').draggable('option', 'containment', $(this));
    }
});

Updated JS Fiddle demo

Newly-updated JS Fiddle demo, featuring revert: invalid，所以将可拖动的div放在任何但的可放置div将导致拖动动画回到其起始位置。如果这是值得赞赏的。或者根本想要......

要解决draggable对象resizable的要求，我认为这不可能，因为draggable()和resizable()都会回复相同的互动。在某种程度上，这可能是可能的，但我现在已经超出了我的想法。

编辑以添加'高度/宽度'要求，还可以整理一些内容并改进CSS。那说：

HTML：

<div id="dragThis">
    <ul>
        <li id="posX">x: <span></span></li>
        <li id="posY">y: <span></span></li>
        <li id="finalX">Final X: <span></span></li>
        <li id="finalY">Final Y: <span></span></li>
        <li id="width">Width: <span></span></li>
        <li id="height">Height: <span></span></li>
    </ul>
</div>

<div id="dropHere"></div>

CSS：

#dragThis {
    width: 8em;
    height: 8em;
    padding: 0.5em;
    border: 3px solid #ccc;
    border-radius: 0 1em 1em 1em;
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.5);
}

#dragThis span {
    float: right;
}

#dragThis span:after {
    content: "px";
}

li {
    clear: both;
    border-bottom: 1px solid #ccc;
    line-height: 1.2em;
}

#dropHere {
    width: 12em;
    height: 12em;
    padding: 0.5em;
    border: 3px solid #f90;
    border-radius: 1em;
    margin: 0 auto;
}

jQuery的：

$('#dragThis').draggable({
    containment: $('body'),
    drag: function() {
        var offset = $(this).offset();
        var xPos = offset.left;
        var yPos = offset.top;
        $('#posX > span').text(xPos);
        $('#posY > span').text(yPos);
    },
    stop: function() {
        var finalOffset = $(this).offset();
        var finalxPos = finalOffset.left;
        var finalyPos = finalOffset.top;

        $('#finalX > span').text(finalxPos);
        $('#finalY > span').text(finalyPos);
        $('#width > span').text($(this).width());
        $('#height > span').text($(this).height());
    },
    revert: 'invalid'
});

$('#dropHere').droppable({
    accept: '#dragThis',
    over: function() {
        $(this).animate({
            'border-width': '5px',
            'border-color': '#0f0'
        }, 500);
        $('#dragThis').draggable('option', 'containment', $(this));
    }
});

JS Fiddle demo, of the above

Answer 2

您可以尝试以下方法之一：

$(this).position()

或

$(this).offset()

.position()方法允许我们检索元素相对于偏移父元素的当前位置。将其与.offset()进行对比，后者检索相对于文档的当前位置。

来自http://api.jquery.com/position/

Answer 3

您可以使用.resizable（）和stop事件获取宽度输出。尝试添加：

$('#dragThis').resizable({ handles: "e, w",      
      stop: function(event, ui) {
        var width = ui.size.width;
        var height = ui.size.height;
    $('#width > span').text($(this).width());
    $('#height > span').text($(this).height());
      }
   });

如何获得可拖动对象的位置

3 个答案:

HTML：

CSS：

jQuery的：