16

これがどのように見えるかです。

$( "#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 . しかし、パーセンテージに基づいてアイテムを包含要素にドラッグしたいと思います。top:10%にする必要があり ます。左:10% .

これを行う方法について何か考えはありますか？

4

3 に答える 3

24

解決策を見つけました。

$( ".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)+"%");
  }
});
于 2012-06-20T10:11:03.210 に答える
4

上記のすべての少し更新されたバージョン:

$('.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) + '%');
}});
于 2016-01-15T20:45:02.603 に答える