这是它的样子;
$( "#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 - 可拖动来拖放项目。那里没有问题。
这是实际问题;
但是当您开始拖动元素时,该函数会更改元素的左侧和顶部位置,例如;顶部:10px 左:10px。但是我想将基于百分比的项目拖到包含元素中。它应该是顶部:10%; 左侧:10%。
关于如何做到这一点的任何想法?
我找到了解决方案;
$( ".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)+"%");
}
});
试试这段代码:
$( ".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);
}
});
以上所有内容的一点更新版本:
$('.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) + '%');
}});