jQuery拖放时间线容差

时间:2016-12-28 20:38:56

标签: jquery scheduled-tasks draggable scheduler droppable

我正在构建一个小而简单的时间轴调度程序,可以拖入外部事件(div)。在时间轴中,有一天存在8小时。

当我将draggin选项snap设置为snap元素(.drop tr)并将snapMode设置为inner时。在droppable的over方法中,当拖动的元素位于drop元素上时,bg颜色正在被更改。

但我有一些问题

  1. 当我将元素向下拖动到droppable(over)上时,事件bg被更改,但是当向上拖动元素时仍然会调用out方法,这怎么可能?
  2. 当横向拖动事件时,我需要15分钟的间隔。所以我在考虑宽度单元格(20px)= 1小时/ 4 = 5px(15分钟)。我用可拖动的网格尝试了这个,但它无法正常工作。
  3. 对于代码,我添加了一个jsfiddle,不要看它的概念风格:)。

    Jquery部分

    $(function()
    {
        $('.evt').draggable({
            revert  : 'invalid',
            grid    : [20 / 4, 40],
            snap    : '.drop tr',
            snapMode: "inner"
        });
    
        $('.day tr').droppable({
            accept   : '.evt',
            tolerance: "fit",
            over     : function(event, ui)
            {
                $(ui.draggable).css('background', 'lightgreen');
                console.log('over');
            },
            out      : function(event, ui)
            {
                $(ui.draggable).css('background', 'red');
                console.log('out');
            }
        });
    });
    

    https://jsfiddle.net/dvr4zysc/

    我希望有人可以帮助我

0 个答案:

没有答案