如何获得使用jQuery拖放后的坐标位置？
如何获得使用jQuery拖放后的坐标位置？ 我想将坐标保存到数据库中，以便下一次访问时，该项目将处于该位置。 例如，x：520px，y：300px？
编辑：
我是PHP和MySQL程序员:)
那里有教程吗？
我只是做了这样的事情（如果我理解你的话）。
我使用他的函数position（）包含在jQuery 1.3.2中。
只是做了复制粘贴和快速调整…但应该给你的想法。
// 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> 有同样的问题。 我的解决scheme是：
$("#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; } });
以上都没有为我工作。
这是我的解决scheme – 伟大的作品：
$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);
（部分基于这里给出的解决scheme： https : //stackoverflow.com/a/10429969/165673 ）
这对我工作：
$("#element1").droppable( { drop: function(event, ui) { var currentPos = ui.helper.position(); alert("left="+parseInt(currentPos.left)+" top="+parseInt(currentPos.top)); } });
如果您正在监听dragstop或其他事件，则原始位置应该是ui参数：
dragstop: function(event, ui) { var originalPosition = ui.originalPosition; }
否则，我相信得到它的唯一方法是：
draggable.data("draggable").originalPosition
其中可拖动的是您正在拖动的对象。 第二个版本不能保证在未来版本的jQuery中工作。
我会从这样的事情开始。 然后更新，使用位置插件 ，这应该让你想要的地方。
$(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>
接受答案是伟大的。 但是，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); }
我需要保存起始位置和结束位置。 这个工作给我：
$('.object').draggable({ stop: function(ev, ui){ var position = ui.position; var originalPosition = ui.originalPosition; } });
