jQuery將div中的文本拖放到較小的div中

Question

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

我在jQuery UI上可拖動/可拖動有問題。

我有一張滿是div的表，但我不想更改其大小。 這是一個水平日歷，左邊是天，頂部是小時。 當我僅將“事件”作為文本拖放一點“ div”時，就可以了。 但是，當我有類似“ VERY BIG TITLE FOR EVENT”的文字時，div會在很多部分“分開”（請參見下面的jsFiddle）。 我希望能夠調整活動的大小。 例如，如果需要在8:00 am到4:00 pm之間將事件設置為“ ON”，則可拖動事件可以放在“ 8:00”列中，並且可以將其大小調整為“ 4:00 pm” ...但是遇到“拆分”問題，我將無法做到這一點。

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鏈接（很小）。 鏈接到jsFiddle

在jsFiddle上，我的標簽確實“很大”，對此感到抱歉。 您可能需要調整大小...

Answer 1

我認為這只是一個樣式問題。 為了避免所謂的“拆分”，只需添加樣式

white-space: nowrap;

到事件元素。 然后它不會分裂。

Answer 2

如果我正確理解了您想要的內容，這似乎只是解決文本拆分問題的CSS問題。 您已包含span標簽的寬度，因此您需要將文本移到內部一個單獨的span中，或者在寬度上使用一些樣式。

以下內容可能會讓您走上正確的道路。

嘗試給它指定寬度（單元格大小-40像素減去盒子模型-28像素

.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;}