Fullcalendar:可拖动对象拒绝将 fullcalendar 视为可放置,即使 fullcalendar 接受放置

2024-01-04

我已经将 FullCalendar 设置为接受 drop,确实如此。但是我用 revert:'invalid' 构造的可拖动对象似乎无法将 FullCalendar 上的日期识别为可放置的,并恢复回来。这是我的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>

  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>mydrag</title>
  <script src="fullcalendar-bundle.js" type="text/javascript"></script>
</head><body>
<div id="mydrag" style="width: 200px; height: 100px; background-color: red;">My Drag</div>
<div id="calendar"></div>


<script type="text/javascript">
function onExternalEventDrop(date, allDay) {
    alert("Dropped on " + date + " with allDay=" + allDay);
}

$('#mydrag').each(function() {

    // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
    // it doesn't need to have a start or end
    var eventObject = {
        title: 'MyDrag Title'
    };

    // store the Event Object in the DOM element so we can get to it later
    $(this).data('eventObject', eventObject);

    // make the event draggable using jQuery UI
    $(this).draggable({
        helper: 'clone',
        //revert: 'invalid',
        revert: function(droppableObj) {
            //if false then no socket object drop occurred.
            if(droppableObj === false) {
                //revert the .myselector object by returning true
                alert('Not a droppable object');
                return true;
            }
            else {
                //droppableObj was returned,
                //we can perform additional checks here if we like
                //alert(droppableObj.attr('id')); would work fine
                //return false so that the .myselector object does not revert
                return false;
            }
         },
        revertDuration: 500,  //  original position after the drag
        start: function(e, ui) {
            $(ui.helper).css('width', $(this).css('width'));
        }
    });

});

$('#calendar').fullCalendar({
    aspectRatio: 2.25,
    header: {
        left: '',
        center: 'title',
        right: 'prev,next'
    },
    columnFormat: {
        month: 'dddd'
    },
    droppable: true,
    drop: onExternalEventDrop
});

</script>
</body></html>

当我将可拖动元素拖到日历上时,该元素会恢复原状(表明日历日期未被识别为有效的可放置元素)......但是放置回调is触发预期的警报(表明 FullCalendar 识别可拖动为有效)。我希望可拖动的内容不应该恢复回来。我做错了什么或者期待什么错了吗?我到处搜索,但没有找到任何可以解释这一点的东西。任何帮助将不胜感激。

更新:忘记提及,我所说的“fullcalendar-bundle.js”是一个包含以下内容的文件:

  • jquery 1.5.2
  • jquery 用户界面 1.8.11
  • 全日历 1.5.2 插件

另一个更新:我刚刚尝试了 FullCalendar 1.5.3 版本,但看到了相同的行为。


这可能会帮助您:

拖放的工作版本 : http://jsfiddle.net/wkKfB/15/ http://jsfiddle.net/wkKfB/15/

Dragobj = false 的解决方案是您需要将可放置事件绑定到日历,以便可拖动的知道 DOM 对象是什么可丢弃的请参阅此处的工作示例:http://jsfiddle.net/CZQkm/3/ http://jsfiddle.net/CZQkm/3/&&http://jsfiddle.net/DEsdN/12/ http://jsfiddle.net/DEsdN/12/ *直到这里

(您的版本,但进行了一些调整。顺便说一句,我在这里 jsfiddl-ed 你的问题:http://jsfiddle.net/wkKfB/16/ http://jsfiddle.net/wkKfB/16/) (问题是绑定外部事件)

好的文档位于此处:http://arshaw.com/fullcalendar/docs/dropping/droppable/ http://arshaw.com/fullcalendar/docs/dropping/droppable/

问题是您需要从外部添加这些拖动事件。

您可以更改 css 并使其适合您的使用。

Quote *[来自上面有关外部拖放的文档。]* http://arshaw.com/fullcalendar/docs/dropping/droppable/ http://arshaw.com/fullcalendar/docs/dropping/droppable/

>     How can I use this to add events???
>     
>     Good question. It is a common need to have an "external list of events" that can be dragged onto the calendar.
>     
>     While the droppable option deals with generic jQuery UI draggables and is not specifically tailored to adding events, it is possible to
> achieve this with a few lines of code. Follow the
> external-dragging.html example in FullCalendar's download. You can
> also view the example online.
>     
>     In short, you must call renderEvent yourself in the drop callback.

另一个链接:http://arshaw.com/js/fullcalendar-1.5.3/demos/external-dragging.html http://arshaw.com/js/fullcalendar-1.5.3/demos/external-dragging.html

要捕获外部事件,您需要添加此代码,但上面的示例已为您完成所有设置,并且应该很清楚

 /* initialize the external events
    -----------------------------------------------------------------*/
$('#external-events div.external-event').each(function() {

    // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
    // it doesn't need to have a start or end
    var eventObject = {
        title: $.trim($(this).text()) // use the element's text as the event title
    };

    // store the Event Object in the DOM element so we can get to it later
    $(this).data('eventObject', eventObject);

    // make the event draggable using jQuery UI
    $(this).draggable({
        zIndex: 999,
        revert: true,      // will cause the event to go back to its
        revertDuration: 0  //  original position after the drag
    });

});


/* initialize the calendar
-----------------------------------------------------------------*/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Fullcalendar:可拖动对象拒绝将 fullcalendar 视为可放置,即使 fullcalendar 接受放置 的相关文章

  • 使用 Twitter 引导模式而不是确认对话框

    我正在尝试使用 twitter 引导模式而不是自定义确认对话框 我的职能 function getConfirm confirmMessage if confirmMessage undefined confirmMessage confi
  • 在 d3 中应用转换时出现错误

    我正在尝试对我在 d3 中设计的条形图应用一些过渡效果 这是我的代码 svg selectAll bar data data enter append g attr class bar append rect attr rx barRadi
  • 使用 jQuery live() 初始化插件?

    使用 jQuery 在特定类的所有当前和未来元素上自动初始化插件的最佳方法是什么 例如 假设我想要全部
  • jQuery 在附加元素后立即返回 div 元素的高度 0

    我有一个浮动 div 最初没有内容 我使用 jQuery 将一组元素附加到 div 然后立即调用原始 div 的 height 方法 我添加的元素在样式表中具有定义的最小高度 而浮动 div 则没有 问题是 当我在原始 div 上调用 he
  • 从本地 html/javascript 网站插入 mySQL 数据库

    我正在尝试做什么 我的程序的目的是插入数据local HTML JS网站变成online 非本地 mySQL数据库 到目前为止我尝试过的 我试图用来实现此目的的原始方法是让我的本地网站使用 javascript 通过在线发布数据PHP文件
  • jPlayer 无法在 Firefox 中播放 mp3

    我正在集成 jplayer 来播放由使用 jQuery 的单击事件触发的精选 mp3 文件 用于实现此目的的代码是 play link click function jquery jplayer 1 jPlayer destroy srcF
  • 数据表 - 从 AJAX 源过滤数据

    我有一个数据表 正在从 api 获取数据 现在我的状态是活动的 非活动的 如果标志是活动的 那么我需要在数据表中显示 否则我不应该显示过期的 这是我的fiddle https jsfiddle net lakshmipriya001 qLp
  • 如何获取动态生成元素的数据属性

    当从服务器抛出动态内容 通过 AJAX 时 我有以下响应 a Some content a 我已经使用绑定了点击事件live http api jquery com live 问题出在我的点击事件中 我无法 获取数据属性 因此手动附加不适合
  • 如何在控制台中隐藏日志消息的来源?

    当将消息输出到控制台时 还会显示源代码 在 Chrome 开发者工具中 它位于右侧 console log Foo Source Foo test js 1 Output 但是 在某些网站上 会显示消息without正在显示的源 例如Fac
  • 使用 jQuery / JavaScript 将 Alpha 通道添加到背景颜色

    我有一个 jQuery 函数 它添加了一个Alpha通道到一个背景颜色当事件发生时 这是我的jsFiddle http jsfiddle net liormb SxQt8 1 CSS div background color rgb 100
  • jQuery .wrap() 不环绕克隆元素

    function extend notify function options duration var defaults inline true href html var options extend defaults options
  • 向 jQuery .toggle() 方法添加 WAI-ARIA 支持

    我想配对怀阿利亚aria hidden http www w3 org TR wai aria states and properties aria hidden支持 jQuery 的 toggle 方法 所以给出 p Hi there p
  • setInterval() 如何影响性能?

    我们正在使用 Twitter Bootstrap 作为框架构建一个 Web 应用程序 但在显示 隐藏工具提示时遇到问题 除了尝试找到实际问题的解决方案之外 我还有一个关于我们同时使用的解决方法的问题 从性能角度来看 使用 setInterv
  • Jquery Mobile Web:可以调用本机应用程序吗?

    我希望能够触摸移动网页上的链接并让它启动本机移动应用程序 例如 Skype 这似乎是一个巨大的安全问题 但我想知道移动环境是否允许这样做 编辑 是的 有用 对 document window myapp myparam 的 javascri
  • php循环中的ajax在按钮单击时执行操作

    所以我有一个 php 循环 我使用 jquery 滑动切换来隐藏 显示带有 sql 结果的表 目前该表仅使用 php 加载 但由于发生了很多事情 导致了一些加载问题 我需要使用滑动切换 btn 来触发 ajax 因此它仅在按下按钮时请求当前
  • Jquery 在输入/按键时不起作用

    我正在尝试创建一个简单的搜索框 允许您根据在输入字段中输入的关键字进行搜索 如果您按下 提交 按钮 此操作就可以正常工作 我还希望能够按 Enter 或 Return 键来启动搜索 我尝试过使用 on 函数 它似乎只适用于单击 但在输入或按
  • jqPlot DateAxis tickInterval 不起作用

    我试图每月绘制一个包含单个数据点的图表 我会在每个月的第一天将其作为一个点发送到 jqPlot jqplot actualChart 2011 10 01 0 296 2011 11 01 0 682 title programSelect
  • jQuery UI 选项卡 - 将选项卡绑定到同一页面上的链接

    我正在尝试将选项卡绑定到同一页面上的链接 但我是 jQuery 的新手 需要一些帮助 我的选项卡使用 jQuery UI 站点的代码 但是 如何绑定同一页面侧边栏中的链接呢
  • 有没有办法限制 Google 地点自动完成功能搜索城市的街道?

    使用 Google 地方信息时可以将搜索限制在城市的街道吗Autocomplete 您可以设置Autocomplete使用选项geocode作为类型 这将限制返回到地址的结果 var input document getElementByI
  • d3.js 更新视觉效果

    我有一个与 d3 js 放在一起的树形图 我通过 getJSON 填充数据 效果很好 但是 我在 setInterval 方法中具有此功能 并且它似乎并没有刷新自身 var treemap d3 layout treemap padding

随机推荐