jQuery 使用jQuery拖放后如何获取坐标位置？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/849030/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I get the coordinate position after using jQuery drag and drop?
提问by
How do I get the coordinate position after using jQuery drag and drop? I want to save the coordinate to a database, so that next time I visit, the item will be in that position. For example, x: 520px, y: 300px?
使用jQuery拖放后如何获取坐标位置？我想将坐标保存到数据库中，以便下次访问时，该项目将位于该位置。例如，x：520px，y：300px？
EDIT:
编辑：
I am PHP and mysql programmer :)
我是 PHP 和 mysql 程序员 :)
Is there any tutorial out there?
那里有教程吗？
回答by Cudos
I just made something like that (If I understand you correctly).
我只是做了这样的事情（如果我理解正确的话）。
I use he function position() include in jQuery 1.3.2.
我使用 jQuery 1.3.2 中包含的函数 position()。
Just did a copy paste and a quick tweak... But should give you the idea.
只是做了一个复制粘贴和快速调整...但应该给你的想法。
// Make images draggable.
$(".item").draggable({
// Find original position of dragged image.
start: function(event, ui) {
// Show start dragged position of image.
var Startpos = $(this).position();
$("div#start").text("START: \nLeft: "+ Startpos.left + "\nTop: " + Startpos.top);
},
// Find position where image is dropped.
stop: function(event, ui) {
// Show dropped position.
var Stoppos = $(this).position();
$("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
}
});
<div id="container">
<img id="productid_1" src="images/pic1.jpg" class="item" alt="" title="" />
<img id="productid_2" src="images/pic2.jpg" class="item" alt="" title="" />
<img id="productid_3" src="images/pic3.jpg" class="item" alt="" title="" />
</div>
<div id="start">Waiting for dragging the image get started...</div>
<div id="stop">Waiting image getting dropped...</div>
回答by Webars
Had the same problem. My solution is next:
有同样的问题。我的解决方案是下一个：
$("#element").droppable({
drop: function( event, ui ) {
// position of the draggable minus position of the droppable
// relative to the document
var $newPosX = ui.offset.left - $(this).offset().left;
var $newPosY = ui.offset.top - $(this).offset().top;
}
});
回答by Yarin
None of the above worked for me.
以上都不适合我。
Here's my solution- works great:
这是我的解决方案 - 效果很好：
$dropTarget.droppable({
drop: function( event, ui ) {
// Get mouse position relative to drop target:
var dropPositionX = event.pageX - $(this).offset().left;
var dropPositionY = event.pageY - $(this).offset().top;
// Get mouse offset relative to dragged item:
var dragItemOffsetX = event.offsetX;
var dragItemOffsetY = event.offsetY;
// Get position of dragged item relative to drop target:
var dragItemPositionX = dropPositionX-dragItemOffsetX;
var dragItemPositionY = dropPositionY-dragItemOffsetY;
alert('DROPPED IT AT ' + dragItemPositionX + ', ' + dragItemPositionY);
(Based partly off solution given here: https://stackoverflow.com/a/10429969/165673)
（部分基于此处给出的解决方案：https: //stackoverflow.com/a/10429969/165673）
回答by Sampath
This worked for me:
这对我有用：
$("#element1").droppable(
{
drop: function(event, ui)
{
var currentPos = ui.helper.position();
alert("left="+parseInt(currentPos.left)+" top="+parseInt(currentPos.top));
}
});
回答by Syahir Halim
$(function()
{
$( "#element" ).draggable({ snap: ".ui-widget-header",grid: [ 1, 1 ]});
});
$(document).ready(function() {
$("#element").draggable({
containment: '#snaptarget',
scroll: false
}).mousemove(function(){
var coord = $(this).position();
var width = $(this).width();
var height = $(this).height();
$("p.position").text( "(" + coord.left + "," + coord.top + ")" );
$("p.size").text( "(" + width + "," + height + ")" );
}).mouseup(function(){
var coord = $(this).position();
var width = $(this).width();
var height = $(this).height();
$.post('/test/layout_view.php', {x: coord.left, y: coord.top, w: width, h: height});
});
});#element {background:#666;border:1px #000 solid;cursor:move;height:110px;width:110px;padding:10px 10px 10px 10px;}
#snaptarget { height:610px; width:1000px;}
.draggable { width: 90px; height: 80px; float: left; margin: 0 0 0 0; font-size: .9em; }
.wrapper
{
background-image:linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent);
height:100%;
background-size:45px 45px;
border: 1px solid black;
background-color: #434343;
margin: 20px 0px 0px 20px;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Layout</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="../themes/default/css/test4.css" type="text/css" charset="utf-8"/>
<script src="../themes/default/js/layout.js"></script>
</head>
<body>
<div id="snaptarget" class="wrapper">
<div id="element" class="draggable ui-widget-content">
<p class="position"></p>
<p class="size"></p>
</div>
</div>
<div></div>
</body>
</html>回答by soso
If you are listening to the dragstop or other events, the original position should be a ui parameter:
如果你在监听dragstop或者其他事件，原来的位置应该是一个ui参数：
dragstop: function(event, ui) {
var originalPosition = ui.originalPosition;
}
Otherwise, I believe the only way to get it is:
否则，我相信获得它的唯一方法是：
draggable.data("draggable").originalPosition
Where draggable is the object you are dragging. The second version is not guaranteed to work in future versions of jQuery.
其中 draggable 是您正在拖动的对象。第二个版本不能保证在未来版本的 jQuery 中工作。
回答by TeckniX
I would start with something like this. Then update that to use the position pluginand that should get you where you want to be.
回答by moluv00
Cudos accepted answer is great. However, the Draggable module also has a "drag" event that tells you the position while your dragging. So, in addition to the 'start' and 'stop' you could add the following event within your Draggable object:
Cudos接受的答案很棒。但是，Draggable 模块还有一个“拖动”事件，可以告诉您拖动时的位置。因此，除了“开始”和“停止”之外，您还可以在 Draggable 对象中添加以下事件：
// Drag current position of dragged image.
drag: function(event, ui) {
// Show the current dragged position of image
var currentPos = $(this).position();
$("div#xpos").text("CURRENT: \nLeft: " + currentPos.left + "\nTop: " + currentPos.top);
}
回答by Diego Mariano
I was need to save the start position and the end position. this work to me:
我需要保存开始位置和结束位置。这项工作对我来说：
$('.object').draggable({
stop: function(ev, ui){
var position = ui.position;
var originalPosition = ui.originalPosition;
}
});
