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

Question

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

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

我有一个满是 div 的表格，我不想改变它的大小。这是一个横向日历，左侧是天，顶部是小时。当我拖放一个只有“事件”作为文本的小“div”时，没关系。但是当我有一个像“非常大的事件标题”这样的文本时，div 在很多部分都被“分割”了（参见下面的 jsFiddle）。我希望能够调整事件的大小。例如，如果事件需要在上午 8:00 到下午 4:00 为“ON”，可拖动事件可以放在“8:00”列，并且可以调整为“4:00pm”...但是有了那个“分裂”的问题，我就做不到了。

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;

到事件元素。然后就不会分裂了。

Answer 2

如果我正确理解您想要什么，这似乎只是一个修复文本拆分的 CSS 问题。您的 span 标签的宽度包含在内，因此您需要将文本移动到内部的单独 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;}