jQuery ui.draggable - 更改当前拖动的对象（在 fullCalendar 中）

Posted 2023-05-08

【中文标题】jQuery ui.draggable - 更改当前拖动的对象（在 fullCalendar 中）

【英文标题】：jQuery ui.draggable - changing the current dragged object (in fullCalendar)

【发布时间】：2010-12-27 14:56:54

【问题描述】：

我刚刚发现了 fullCalendar jQuery 插件，它几乎可以完成我正在构建的约会安排服务所需的一切。但是，我遇到了一个小问题。

fullCalendar议程日视图中有“事件”元素是可拖动的，但是它们被锁定到可用时间段的时间段。我想保留这个对时间段的捕捉，但也可以将事件完全拖到日历之外（这是旧版本系统的行为要求）。

我的想法是在日历表的 mouseout 事件上克隆对象；这可行，但是用户必须从原始对象中单独单击并拖动克隆，而不是克隆接管被拖动。

一旦用户尝试将“事件”元素拖到表格外，我需要将“我正在被拖”状态转移到克隆。这有可能吗？有没有我可以使用的更简单的解决方案？

这是我的克隆代码。 eventDragStart 是一个“触发动作”，当用户开始拖动一个关于 (http://arshaw.com/fullcalendar/docs/triggered-actions.php) 的事件时调用，其中 $(this) 设置为事件元素，event 是 calEvent（实际数据项 - 此处不相关） , js 是 javascript 事件（我得到坐标的地方）， ui 是 ui 对象引用。 “.fc”是日历，“#display_box”是包含这部分界面的父元素。 （顺便说一句，定位还不能正常工作，但现在这是次要优先事项）。

...
eventDragStart: function (event, js, ui) $\   
var eventElement = $(this);
 $(".fc").mouseout(function () 
  eventElement.clone().css('z-index':99999, top:js.clientY, right:js.clientX).appendTo("#display_box").draggable(helper: 'original'); 
  $(".fc").unbind("mouseout");
 );
,
....

我希望没有使用过 fullCalendar 的人都清楚这一点。我真的很感激任何帮助，很抱歉它这么长。

【参考方案1】：

我想你会想要使用eventElement.clone(true) 传递布尔值 true 作为参数将克隆元素的所有附加事件/处理程序，而不传递只会克隆 jQ 中包装的圆顶元素。

【讨论】：

感谢您的指点；我试过了，但是克隆的对象仍然没有变成“当前”的可拖动对象；克隆只是作为另一个单独的可拖动对象出现在文档中，而不是我正在尝试的连续拖动。

【参考方案2】：

如果有人对我使用的解决方案感兴趣，我最终编写了自己的迷你可拖动功能 - 如果用户移出日历表，我只是在拖动事件期间克隆对象，并手动更新克隆的 css 顶部/保留值直到拖动事件结束。这意味着原始对象仍会在表格中上下拖动，这不是很理想，但这是我能想到的提供客户所需功能的最佳解决方案。