Как получить координатную позицию после использования перетаскивания 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); } }); 
Waiting for dragging the image get started...
Waiting image getting dropped...

Имела та же проблема. Мое решение следующее:

 $("#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; } }); 

Ничто из этого не помогло мне.

Вот мое решение – отлично работает:

 $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); 

(Исходное решение с частичной отдачей приведено здесь: 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)); } }); 

Если вы слушаете drag and drop или другие события, исходная позиция должна быть параметром ui:

 dragstop: function(event, ui) { var originalPosition = ui.originalPosition; } 

В противном случае, я считаю, что единственный способ получить это:

 draggable.data("draggable").originalPosition 

Где draggable – объект, который вы перетаскиваете. Вторая версия не гарантирует работу в будущих версиях jQuery.

Я бы начал с чего-то подобного. Затем обновите это, чтобы использовать плагин position, и он должен получить вас там, где вы хотите быть.

 $(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; } 
     Layout        

Кудос принял ответ, это здорово. Тем не менее, модуль 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; } }); 
Interesting Posts

Преобразование строки в строковый массив в java

Как сохранить изображение в общих предпочтениях в Android | Общая проблема с предпочтением в Android с изображением

StreamCorruptedException: неверный код типа: AC

Исключение начального фильтра struts2 – попытался добавить JAR, но тот же результат

Как присоединиться / объединить 2 таблицы рабочих таблиц с помощью 3-й таблицы в Excel?

Как я могу отражать элементы динамического объекта?

Не удалось создать экземпляр android.gms.maps.MapFragment

Почему для 64-разрядной версии Windows 7 требуется больше памяти, чем 32-разрядная?

остановить службу в android

Что происходит быстрее, итерации вектора STL с помощью vector :: iterator или с at ()?

Могу ли я принудительно использовать всю службу индексирования Windows?

Разница между файлом .keystore и файлом .jks

Как исправить ошибку «Fail to connect to camera service» в Android-эмуляторе

Авто-свойства C # 3.0 – полезны или нет?

Как получить идентификатор fragmentа URL из HttpServletRequest

Давайте будем гением компьютера.