Question

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

我遇到了jQuery UI draggable / Droppable的问题。

我有一个充满div的表，其大小我不想改变。这是一个水平日历，左边是天，右边是小时。当我拖放一个只有“event”作为文本的小“div”时，它没问题。但是当我有一个类似“非常大的事件”的文本时，div在许多方面被“分裂”（参见下面的jsFiddle）。我希望能够调整活动的大小。例如，如果事件需要在上午8:00到下午4:00“开启”，则可拖动事件可以在“8:00”列中删除，并且可以调整为“下午4:00”......但是如果出现“分裂”问题，我将无法做到这一点。

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;

到event-element。然后就不会分裂了。

Answer 2

如果我理解你想要什么，这似乎只是一个css问题来修复文本的分裂。您的span标记的宽度已包含，因此您需要将文本移动到内部的单独范围内，或者在宽度上使用一些样式。

以下内容可能会让您走上正轨。

尝试给它指定的宽度（单元格的大小 - 40px减去框模型--28px

.external-event {
    display:inline-block;
    width:28px;
}

然后，当您跨越多个小时跨越/拖动事件时，您可以使用javascript来更改宽度。

您可能希望切断多余的文字并将其显示在悬停/工具提示等

上

.external-event {
        overflow:hidden;
    }
http://jsfiddle.net/n3Smt/6/

为了使文本完整显示而不影响事件的形状，请将其放在单独的范围内，然后在内部范围中添加一些样式，例如：

<span class='external-event'><span class=textWrapper>BIG EVENT WITH SPACES</span></span>

.textWrapper {position:absolute;}

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

2 个答案: