将基于百分比的项目拖动到包含元素

这是它的样子;

$( "#box ul li" ).draggable({ helper: "clone" }); $( ".item" ).draggable({containment: ".door"}); $( ".door" ).droppable({ accept: ":not(.ui-sortable-helper, .item)", drop: function( event, ui ) { $( "
" ).html(ui.draggable.find("img")).appendTo(this); } }); 

用户拖动$（“＃box ul li”）元素并将其放在$（“。door”）元素上。 它将它附加到带有$（“。item”）选择器的$（“。door”）元素。

我正在使用jquery UI – Draggable来拖放项目。 那里没有问题。

这是实际的问题;

但是当你开始拖动元素时，函数会改变元素的左侧和顶部位置，如; 上图：10px左：10px 。 但我想将基于百分比的项目拖到包含元素。 它应该是最高的：10％; 左：10％ 。

关于如何做到这一点的任何想法？

Answer 1

我找到了解决方案;

 $( ".item" ).draggable({ containment: ".door", stop: function( event, ui ) { $(this).css("left",parseInt($(this).css("left")) / ($(".door").width() / 100)+"%"); $(this).css("top",parseInt($(this).css("top")) / ($(".door").height() / 100)+"%"); } }); 

Answer 2

试试这个代码：

 $( ".element" ).draggable({ stop: function (){ var l = ( 100 * parseFloat($(this).css("left")) / parseFloat($(this).parent().css("width")) )+ "%" ; var t = ( 100 * parseFloat($(this).css("top")) / parseFloat($(this).parent().css("height")) )+ "%" ; $(this).css("left" , l); $(this).css("top" , t); } }); 

Answer 3

以上所有的更新版本：

 $('.element').draggable({ containment: 'parent', stop: function( event, ui ) { var $elm = $(this); var pos = $elm.position(), parentSizes = { height: $elm.parent().height(), width: $elm.parent().width() }; $elm.css('top', ((pos.top/parentSizes.height) * 100) + '%').css('left', ((pos.left/parentSizes.width) * 100) + '%'); }});