jQuery拖放和克隆，找到元素的放置位置 [英] jquery drag, drop and clone, find dropped position of element

问题描述

这是我的jquery拖放，克隆功能的小提琴.

问题:

我的问题是:每当我放下元素时，它就会显示:

position: {top: 0, left: 0}

仅适用于可拖动，克隆和可放置元素.

我还编写了仅使用draggable函数查找位置的代码，效果很好.我想要draggable, droppable with clone feature

中的这种行为

请访问JSFiddle

小提琴

全屏输出

解决方案

最后，解决了该问题.问题是，我正在使用ui.draggable.position();将放置的位置存储到数据库中，这是错误的.

我们需要存储的实际位置是:

// position of the draggable minus position of the droppable
// relative to the document
leftPosition  = ui.offset.left - $(this).offset().left;
topPosition   = ui.offset.top - $(this).offset().top;

参考:如何使用jQuery拖放后如何获得坐标位置?

使用工作示例更新了Jsfiddle

http://jsfiddle.net/przbadu/rkvdffe3/18/

http://jsfiddle.net/przbadu/rkvdffe3/18/embedded/结果/

Here, is my fiddle for jquery drag, drop and clone feature.

Problem:

My problem is: when ever I drop element, it is showing:

position: {top: 0, left: 0}

only for draggable, clone and droppable element.

I have also written code for finding position using only draggable function and that is working fine. I want this behavior in draggable, droppable with clone feature

Please visit JSFiddle

fiddle

full-screen output

解决方案

Finally, resolved the problem. The problem was, I was using ui.draggable.position(); for storing dropped position to database, which was wrong.

The actual position we need to store is:

// position of the draggable minus position of the droppable
// relative to the document
leftPosition  = ui.offset.left - $(this).offset().left;
topPosition   = ui.offset.top - $(this).offset().top;

Reference: How do I get the coordinate position after using jQuery drag and drop?

Updated Jsfiddle with working example

http://jsfiddle.net/przbadu/rkvdffe3/18/

http://jsfiddle.net/przbadu/rkvdffe3/18/embedded/result/

这篇关于jQuery拖放和克隆，找到元素的放置位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！