JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<ul class="calendar-tasks">
<li class="allowed-to-drag"><a>item 1</a></li>
<li class="allowed-to-drag"><a>item 2</a></li>
<li class="allowed-to-drag"><a>item 3</a></li>
</ul>

<div class="previous-week">
Previous
</div>
<div class="next-week">
Next
</div>

JavaScript

startDragging();

function startDragging() {

    var $calendar = $(".calendar-tasks");

    $("li.allowed-to-drag", $calendar).draggable({

        revert: "invalid",
        helper: function (event, ui) {

            return $(this).appendTo("body");

        },
        cursorAt: { left: 25 },
        zIndex: 100,
        start: function (event) {

            $(".previous-week a, .next-week a, .previous-month a, .next-month a").addClass("swipeable");

            startSwipe();

        },
        stop: function (event) {

            $(".previous-week a, .next-week a, .previous-month a, .next-month a").removeClass("swipeable");

            stopSwipe(); // A test if this would work...

        }

    });

}

function startSwipe() {

    $(".previous-week a, .next-week a, .previous-month a, .next-month a").mouseover(function(){

        alert("hovered");

    });

    return;

}

function stopSwipe() {

    return;

}