Ben Ripkens

back to blog index

Trigger jQuery UI drag start event

In my last few blog posts I repeatedly referenced the visualization that I’m working on. This post is about an obstacle that I encountered while implementing drag and drop functionality.

Most UML CASE tools allow you to manipulate the shape of a line by adding drag handles to a line. These drag handles can then be used to curve the line. While testing the first visualization with the customer, I repeatedly noticed that he pressed the left mouse button on a line (which adds a drag handle to a line) and moved the mouse around without releasing the left mouse button. Clearly, he was expecting that the drag handle would immediately be dragged when not releasing the mouse button. Unfortunately this wasn’t implemented.

I used the jQuery UI JavaScript library to implement drag and drop functionality which is pretty simple but sadly does not provide any built in functionality to trigger the drag event. After some searching, I found the jQuery simulate plug in. As you might have guessed from the described issue and name of the plug in, it allows to simulate mouse and keyboard events. With the plug in it is easy to start the jQuery UI drag functionality as the following code listing shows.

var someLine = $("#someLine");

someLine.mousedown(function(e) {
    // create a new drag handle
    // the drag handle is jQuery UI draggable
    var dragHandle = $("#someHandle").show();

    var coords = {
        clientX: e.clientX,
        clientY: e.clientY
    };

    // this actually triggers the drag start event
    dragHandle.simulate("mousedown", coords);
});
That's me, Ben.
Hey, I am Ben Ripkens (bripkens) and this is my blog. I live in Düsseldorf (Germany) and I am employed by the codecentric AG as a Software Engineer. Web application frontends are my main area of expertise, but you may also find some other interesting articles on this blog.