jQuery拖放动态高度答案

【问题标题】：jQuery Drag and Drop dynamic heightjQuery拖放动态高度
【发布时间】：2016-12-14 11:09:35
【问题描述】：

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

我的问题是当我在我的区域中添加容器元素并在容器内添加 RadioButtonElement。因此，当我在我的容器中只有 1 个或 2 个 Radio 元素时，容器高度默认为 300px，但是当我在容器内添加 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
    });
}

【问题讨论】：

我看到的部分问题是您对容器和子级都使用了content 类。我打算建议您将height: 300px; 调整为min-height: 300px; 以允许盒子增长而不是被锁定。由于这将适用于两个元素，因此会导致问题。

标签： jquery jquery-ui drag-and-drop

【解决方案1】：

我建议在你的 drop 中使用 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/

【讨论】：