2

From reading a couple of simple questions it seems as though my problem may be that a DOM element cannot have more than one JQuery UI Droppable scope. I was wondering if someone could confirm this or maybe suggest a workaround?

For example I have a two draggables that I want to drop on a list:

<ol>
  <li>one
  </li>
  <li>two
  </li> 
  <li>three
  </li>
  <li>four
  </li> 
</ol>

<div id="drag">drag me1
</div>
<div id="drag2">drag me2
</div>

Is there a way of assigning two different results based on which element is dragged onto the list (this is trivial in this example, but in real-life I have a more complex set of lists and elements)?

In this example I have:

$('#drag').draggable({scope: "one"});
$('#drag2').draggable({scope: "two"});

$('ol li').droppable({scope: "one", drop: function(){ alert("one");}})
$('ol li').droppable({scope: "two", drop: function(){ alert("two");}})

But only drag1 can be moved onto the list, causing the second alert to be fired.

It seems as though using scope just causes a conflict between drag and drop and doesn't work as I'd expect... and if it doesn't work like this then what is the purpose of the scope parameter?

Here is a fiddle of my example to play with; any help much appreciated: Fiddle here

WheretheresaWill
  • 5,882
  • 7
  • 30
  • 43
  • related: http://stackoverflow.com/questions/11066497/jquery-ui-drag-droppable-with-multiple-scopes – alxndr Feb 05 '14 at 00:27

1 Answers1

2

See this FIDDLE

Basically, you can only have one scope easily. However, the drop method of droppable allows you access to the element being dragged by passing in 2 properties, event and ui.

so if you only use one drop function and change it to :

$('ol li').droppable({drop: function(event, ui){ alert($(ui.draggable).prop('id'));}})

you can see whichever draggable is dropped has its id alerted. You can pretty much then do whatever you need to do by putting data-props or whatever on each draggable element and accessing them with:

$(ui.draggable)._jquery-method_();
Rooster
  • 9,954
  • 8
  • 44
  • 71
  • Thanks for the response, I see your point and have been using the the drop event in a similar way. Although it would be useful to attach two differently scoped drop areas in order to allow attaching different `activeClass` and `hoverClass` attributes. There are workarounds for this but it just makes things more difficult. If this just isn't possible then fair enough... I still wonder what the true purpose of `scope` is though. – WheretheresaWill Aug 07 '13 at 15:56
  • @WheretheresaWill Basically, I think the purpose of scope is to prevent draggable objects without a droppables scope to be dropped on it. For example, say you had a quarter, a nickel, a dollar bill, and a coin slot which was a droppable. You could set the scope of the coins and the coin slot to something like "coin", and the dollar bill to something like "paper". This way the coins could be dropped on the slot, but if you tried to drop the dollar bill it wouldn't be possible because the scopes didn't match. In fact, not setting a scope for dollar bill would work the same. – Rooster Aug 07 '13 at 16:01