Question

I’m having trouble using the attribute contains selector combined with the droppable fundtion.
I’m searching for div elements with an id which contains the string “dropAble”

$('div[id*="dragAble"]').draggable();
$('div[id*="dropAble"]').droppable( 
    {
        drop: handleDropEvent
    } 
);

I want each element to react on the drop event. I have to do it like this, because I’m using JSF, and since it replaces the initial id of my divs I have to search for this substring.

The drop Event is declared like this:

function handleDropEvent( event, ui ) {
    var draggable = ui.draggable;
    alert( 'The square with ID "' + draggable.attr('id') + '" was dropped onto me!' );
    alert( this );
}

First of all, not all of these elements react on the drop event, only the first two. Also “this” always is the last element, so it seems it overwrote the other definitions.

my html part for the dropelement looks like this:

<t:dataList value="#{bean.list}" var="elem">
<t:htmlTag value="li" styleClass="folder">
<t:div id="dropAble">
    ...
<:/div>
<t:htmlTag>

The html part of the drag element looks like this:

<t:dataTable ...>
<t:column ...>
<h:outputText value="#{dok.text}&nbsp;" escape="false"  />
<t:div forceId="true" id="dragAble">
    Drag
</t:div>
</t:column>
</t:dataTable>

I expected, to be able to determine which drag object was moved (which works fine) and to determine where the dragged item is dropped (which always seems to be the last element).
Since the draggable() call in the init function works, I don’t understand why it does not using the droppable function.

Is there another way to do this? What am I doing wrong?

Thx for any suggestion!

Answer 1

Look here: http://jqueryui.com/demos/droppable/ and here http://jqueryui.com/demos/draggable/
You did everything right in the drop handler. From jQuery UI documentation on drop handler:

This event is triggered when an accepted draggable is dropped ‘over’
(within the tolerance of) this droppable. In the callback, $(this)
represents the droppable the draggable is dropped on. ui.draggable
represents the draggable.