CODEWITHSUNDEEP
javascriptjqueryjquery-uidrag-and-dropdraggable
Mr.Turtle
Mr.Turtle

Reputation: 3090

JQuery OnDrag fire a click when hovered

I have a drag-drop-application which uses JQuery UI onDrag and onDrop. This application is a room reservation system that have tabs. I have made the drop-working perfectly, but there is one functionality I really want (if possible).

Is there a way to create a event-handler for the tabs, that fires only if you are dragging an element?

Example: You want to move a person from Tab1 to Tab2, without clicking the tab, you can only drag the person -> hover the tab -> then the tab gets clicked.

Upvotes: 0

Views: 233

Answers (1)

Noble Mushtak
Noble Mushtak

Reputation: 1784

There is no specific event handler for dragging an element, but by manipulating other events, you can make it work.

The trick is to use the mousemove event, but make it only work when the mouse has been pressed down on the draggable element. Therefore, we make a certain Boolean true in the mousedown event and then make it false in the mouseup event. The mousemove event checks if the Boolean and runs its code if and only if the Boolean is true.

Here's an example:

$(document).ready(function() {
    //Make draggable draggable
    $("#draggable").draggable();
    //mousedown and mouseup Boolean
    var drragging = false;
    $("#draggable").mousedown(function() { dragging = true; });
    $("#draggable").mouseup(function() { dragging = false; });
    //mousemove event -> mousedrag event
    $("#draggable").mousemove(function() { if (dragging) {
        //The event:
        $("#draggable").css("color", "rgb("+Math.round(255*Math.random())+", "+Math.round(255*Math.random())+", "+Math.round(255*Math.random())+")");
    }});
});
<span id="draggable">Drag me!</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

Upvotes: 3

Related Questions