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

Question

我试图获得x并y使用jQuery可拖动的对象.

场景是,我将一个对象拖放到另一个对象上,并希望得到拖放对象的位置.

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

这是我尝试过的:

<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小提琴演示.

该演示由赞助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));
    }
});

更新了JS Fiddle演示.

最新更新的JS Fiddle演示,特色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演示.

Answer 2

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

$(this).position()

要么

$(this).offset()

该.position()方法允许我们检索元素相对于偏移父元素的当前位置.与此对比.offset(),检索相对于文档的当前位置.

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