Question

目前我正在创建一个拖放应用程序并使用jQuery-ui。

我的问题是当我在我的区域中添加容器元素并在Container内添加RadioButtonElement时。因此，当我在MY Container中只有1或2个无线电元素时，容器高度默认为300px但是当我在Container内部添加3个或更多RadioButtonElement时，容器高度仍然是300px并且不是动态的，它不会改变高度容器

请查看附件。

sample drag and drop

这是jsfiddle：https://jsfiddle.net/2sob2ctf/3/

谢谢乌斯曼

我的代码：

       var origin = 'sortable';
/*
    Schrittbox
 */
$(".builder .headbox").draggable({
    appendTo:".buildplace",
    connectToSortable:".buildplace",
    helper: "clone",
    revert: "invalid",
    start: function () {
        origin = 'draggable';
    },
    stop: function (e, t) {
        bindDraggable(".headbox .content", ".radioContainer");
    }

});

$(".buildplace").droppable({
    accept: ".headbox",
    greedy: true,
    drop: function (event, ui) {
        console.log("schrittbox")
        if (origin === 'draggable') {
            ui.draggable.html($(".view",ui.draggable).html());
            ui.draggable.addClass("dropped");
            origin = 'sortable';
        }
    }
}).sortable();
/* ende

 /*
 radioContainer
 */

$(".builder .radioContainer").draggable({

    connectToSortable:".headbox >.content",
    helper: "clone",

    start: function () {
        origin = 'draggable';
    },
    stop: function (e, t) {
        bindDraggable(".radioContainer .content", ".radioButton");
    }

});

/*
 radioButton
 */
$(".builder .radioButton").draggable({

    connectToSortable:".radioContainer .content",
    helper: "clone",

    start: function () {
        origin = 'draggable';

    },


});


function bindDraggable(selector, accept){
    $(selector).droppable({
        accept: accept,
        greedy: true,
        drop: function (event, ui) {
            console.log("radiocontainer")
            if (origin === 'draggable') {
                ui.draggable.html($(".view",ui.draggable).html());
                origin = 'sortable';
            }
        }

    }).sortable({
        revert: true
    });
}

Answer 1

我建议你使用animate()。它具有获取附加值的优点。

动画属性也可以是相对的。如果一个值带有前导+=或-=字符序列，则通过在属性的当前值中加上或减去给定数字来计算目标值。

示例：

function bindDraggable(selector, accept) {
    $(selector).droppable({
      accept: accept,
      greedy: true,
      drop: function(event, ui) {
        console.log("radiocontainer")
        var count = $(this).find(".radioContainer").length;
        if (count > 2) {
          $(this).animate({
            height: "+=60"
          }, "fast");
        }
        if (origin === 'draggable') {
          ui.draggable.html($(".view", ui.draggable).html());
          origin = 'sortable';
        }
      }
    }).sortable({
      revert: true
    });
  }

分叉小提琴：https://jsfiddle.net/Twisty/2sob2ctf/6/

jQuery拖放动态高度

1 个答案: