基于百分比容纳构件拖动项目(dragging items based on percentage t

这里是什么样子;

$( "#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李”）元素并且将其在$（“门”）的元素。 并追加到$（“门‘）与元素$（’项目”）选择。

我使用jQuery用户界面 - 可拖动到拖放项目。 有就是有没有问题。

下面是实际的问题;

但是当你开始拖动元素，功能改变元素的左边和顶部位置一样; 顶部：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) + '%');
}});

文章来源: dragging items based on percentage to containment element