I’m a bit stuck trying to enable the following behaviour :
As a user
When I select a text (=some words) in a textarea
And I drag and drop it in a list
Then a new item is created in the list with the selected text as displayed value.
Here is the current status :
I can get selected text from the textarea
I can handle the ‘dragstart’ event and get the selected text
I can’t handle the droppable({drop: function(evt, ui) {…}) nor ‘dragstop’ event
If I add a new draggable() element, I can drop it in a droppable() element within the same template but not in another template
I can drag and drop the selected text outside the browser (in a text area such as skype chat or text editor) !
I want to drop it in the browser but in another template
I’ve done something like this: login in the top left corner of appmanager.meteor.com and try dragging tabs around.
You can see the way I do it on line 150 and line 285 of the source code. The draggable elements are registered in the .rendered function (line 105) and the droppables are registered in a different template’s .rendered function (line 78). As you can see, the tabs can be dragged from their original template to the new template and then dropped there.
A few notes I remember from building this functionality:
Make sure that the element you are trying to “drop” into is not covered by other elements. If it is, you may need to add some “pointer-events: none” CSS to those elements so they don’t receive pointer events.
On the droppable, I listen to the over, out, and drop events
On the draggable, I listen to the start, drag, and stop events
Thank you. Interesting but unfortunately it does not solve the problem related to drag/drop a selected text from a textarea to another template (any droppable).
As I mentionned, I can drop outside the navigator as text but not into another template.
