根据百分比将项目拖动到包含元素答案

【问题标题】：dragging items based on percentage to containment element根据百分比将项目拖动到包含元素
【发布时间】：2012-06-22 08:51:50
【问题描述】：

这是它的样子；

$( "#box ul li" ).draggable({
    helper: "clone"
});
$( ".item" ).draggable({containment: ".door"});

$( ".door" ).droppable({
    accept: ":not(.ui-sortable-helper, .item)",
    drop: function( event, ui ) {
       $( "<div class='item'></div>" ).html(ui.draggable.find("img")).appendTo(this);
    }
});

用户拖动 $("#box ul li") 元素并将其放在 $(".door") 元素上。并使用 $(".item") 选择器将其附加到 $(".door") 元素。

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

这是实际问题；

但是当您开始拖动元素时，该函数会更改元素的左侧和顶部位置，例如； 顶部：10px 左侧：10px。但我想根据百分比将项目拖动到包含元素。它应该是 顶部：10%；剩余：10%。

有什么想法吗？

【问题讨论】：

标签： jquery jquery-ui-draggable jquery-ui-droppable

【解决方案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)+"%");
  }
});

【讨论】：

@RecepSimsek 我有一个类似的question。我想知道您是否可以给我一些指示

【解决方案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);
     }

});

【讨论】：

【解决方案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) + '%');
}});

【讨论】：