Need help about drag and drop


#1

Hello,

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 :wink:
  • demonstration app such as https://github.com/awatson1978/drag-and-drop.git works fine.

Any suggestion welcome.
Thank you
Configuration : meteor 1.0.3.2, Firefox 36.0, OSX 10.8.5


#2

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

#3

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.


#5

Do you ave a git repo I could take a look at?