Question

我正在使用Jssor滑块，而在其中一张幻灯片中我放了一个带有fullCalendar的日历。当我拖动日历事件将其移动到另一个日期时，我的问题就来了，因为除了移动事件之外，滑块还会动作并更改为另一个滑块窗口。当我检测到拖动开始事件时，我可以停止滑块的动作吗？还有其他办法吗？

代码HTML（jssor slider + FullCalendar）：

<div id="slider1_container" class="green-background">
    <!-- Slides Container -->
    <div u="slides" style="cursor: move;">
        <div id="first-slide" class="green-background">
            <div class="row">
                <div class="col-md-1" style="padding-right: 1em;">
                    ...
                </div>
                <div class="col-md-11">
                    <div id='calendar'></div>
                </div>
            </div>
        </div>
        <div id="second-slide" class="green-background"></div>
        <div id="third-slide" class="green-background"></div>
    </div>
</div>

JS代码到jssor slider：

var options = { $AutoPlay: false };
jssor_slider1 = new $JssorSlider$('slider1_container', options);

JSC代码到fullCalendar：

var hoy = new Date();
$('#calendar').fullCalendar({
    contentHeight: 380,
    header:false,
    fixedWeekCount: false,
    events: [
        {id:2 , title: 'New event1', start:  '2017-02-15'}
    ],
    editable: true,
    defaultDate: hoy,
    selectable: true,
    eventDragStart: function( event, jsEvent, ui, view ) { 
        // Code to stop slide
    }
})

Answer 1

添加属性'data-nodrag'以防止拖动元素。

<div data-nodrag="true" ...>

修改

<div class="col-md-11"> <div data-nodrag="true" id='calendar'></div> </div>

如何在拖动开始事件上停止滑块jssor操作？

1 个答案: