根据百分比将项目拖动到包含元素 [英] dragging items based on percentage to containment element

问题描述

这是它的样子；

$( "#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")元素.

User drags the $( "#box ul li" ) element and drops it on $(".door") element. And it appends it to $(".door") element with $(".item") selector.

我正在使用jquery UI-可拖动以拖放项目.那里没有问题.

I am using jquery UI - Draggable to drag and drop items. There is no problem there.

这是实际的问题；

但是，当您开始拖动元素时，该函数会更改元素的左侧和顶部位置，例如: 顶部:10像素，左侧:10像素. 但我想将基于百分比的项目拖到containment元素中.它应该是 顶部:10％；左:10％.

But when you start dragging the element, the function changes the element's left and top positions like; top:10px left:10px. But i want to drag the item based on percentage to the containment element. It should be top:10%; left:10%.

关于如何执行此操作的任何想法?

any idea on how to do this?

推荐答案

我找到了解决方案；

$( ".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)+"%");
  }
});

这篇关于根据百分比将项目拖动到包含元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！