0

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!

HashtagMarkus
  • 1,641
  • 11
  • 20
  • Use classes instead. `
    and
    ` then in your js: `$(".draggable").draggable(); $(".droppable").droppable()`.
     – Ilia Frenkel Sep 13 '12 at 11:48
  • If I'd use classes, how could I determine which element is dragged, and to which element it was dropped? Wouldn't they all look alike? – HashtagMarkus Sep 13 '12 at 11:50

1 Answers1

0

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.

Ilia Frenkel
  • 1,969
  • 13
  • 19
  • I'll accept this answer. There actually wasn't anything wrong, except the width of my dragable div. I thought it would depend on the coursor position, where the drag n drop event is fired. But it is acually depending on the position of the element itself. Thx for your suggestion – HashtagMarkus Sep 13 '12 at 12:34