Question

I’m trying to make a draggable helper change based on the context of where the dragged element is (indicating you can drop the element there by changing the helper).

I had two ideas in my mind:

1. Declare the helper as a function, and return the appropriate helper. Unfortunately, the function is called only once, at the beginning of the drag.

2. In the drag event, change the helper. This sounds like the best option. The problem is that I don’t find how to change the helper to a specific DOM element (only accepted values are “clone”, “original” and a function.

Am I missing something or is this not possible ?

Answer 1

You can access the helper within the drag event:

$('#list').draggable({helper:'clone'});

$("#list").bind("drag", function(event, ui) {
    ui.helper.css("background-color", "red");
});

The UI parameter refers to the dragged element. ui.helper is the instance of the current helper, wich can be modified on the fly.