javascript - Jquery 将 div 中的文本拖放到较小的 div 中

Question

首先，我使用 Laravel 4，以及一些插件，如 Bootstrap、jQuery、jQuery-ui...

我对 jQuery UI 可拖动/可放置有疑问。

我有一个充满 div 的表格，其大小我不想更改。这是一个水平日历，日期在左边，小时在顶部。当我拖放一个只有“事件”作为文本的小“div”时，就可以了。但是当我有一个像“VERY BIG TITLE FOR EVENT”这样的文本时，div 会被“分割”成很多部分(参见下面的 jsFiddle)。我希望能够调整事件的规模。例如，如果事件需要在上午 8:00 到下午 4:00 处于“ON”状态，则可以将可拖动事件放在“8:00”列，并且可以将其大小调整为“4:00pm”...但是由于“ split ”问题，我将无法做到这一点。

for (var j = 0; j < 24; j++){
    $("#creneau"+i).append("<div class='creneau' id='creneau"+i+"-"+j+"' style='display: inline-block; float: left; margin 0; width: 40px; height: 20px; '></div>");
    $("#creneau"+i+"-"+j).droppable({
        appendTo: "body",
        tolerance: "pointer",
        accept: ".external-event",
        drop: function(event, ui) {        
            $(this).append($(ui.draggable));
        }
    });
}

$(".external-event").draggable({
    appendTo: "#hours-creneau",
    cursor: "move",
    helper: 'clone',
    revert: "invalid"
});

这里是所有代码的 jsFiddle 链接(有点大)。 Link to jsFiddle

我的选项卡在 jsFiddle 上确实“很大”，对此感到抱歉。您可能需要调整大小...

Answer 1

我认为这只是一个样式问题。 为了避免“分割”(如您所说)，只需添加样式

white-space: nowrap;

到事件元素。那么它就不会被 split 。