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

Posted 2023-03-14

【中文标题】Jquery将div中的文本拖放到较小的div中

【英文标题】：Jquery Drag and Drop with text in div into smaller div

【发布时间】：2014-05-30 23:24:18

【问题描述】：

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

【问题讨论】：

只是提示，从指向 JsFiddle 的链接中删除 "See this fiddle for an example

是的，感谢 AnoopJoshi 编辑并删除了该错误。感谢@urbz 的提示 :-)

【参考方案1】：

我认为这只是一个样式问题。 为了避免“分裂”，正如你所说，只需添加样式

white-space: nowrap;

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

【讨论】：

谢谢。在“droppable” div 上添加空格，而不是在“draggable” div 事件上，解决了这个问题。非常感谢！

【参考方案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;

【讨论】：

结果出乎我的意料。顺便说一句，@Homungus 回答得很好，所以我会使用他的方法。感谢您的尝试。 :-)