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

首先，我使用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上，我的标签确实“很大”，对此感到抱歉。您可能需要调整大小...