DragDrop a textarea

Is it possible for the user to type into a textArea that has been dragged (in run time using DragDrop) into a container? See attached sample project. TemplateSyllabus2.appstudio.zip (12.4 KB)

Absolutely… just make sure the drag/drop process assigns an ID to the element so that you can retrieve the typed text and, perhaps, set some attributes.

The problem is that the user cannot type into the textArea.

Is the textarea active or inactive? In the ondrop event trying setting “it” to active.

The only property I could find for textarea (Bootstrap4) that corresponded to ‘active’ was ‘disabled’. I set it to false in the DragDrop.onTargetDrop event. No change - still can’t click into the text area in run time. Other thoughts?

@cindycc, can you explain a bit more what you’re trying to do? I’m looking at your project and it’s not clear to me.

This is supposed to let someone build a document that requires specific sections (eg. Contact Info). So the user can drag over the title of a section, then drag over the textarea in which they can type in their content. This will be run on a laptop, not mobile.

I’m still not picturing this. Do they drag and drop sections of text into a bigger document? Where do they input text?

This is going to be a webpage. They will either type text into the textarea’s or paste it in. When all done, there will be several headings (that are not there now) and several associated text areas to fill in, one for each heading. Does that help?

Now I don’t understand how the dragging and dropping fits in.

It gives them options where to put different sections - for example, start with the Contact information section or a different section?

Either of these should work…

Plain javascript…

document.getElementById("comment").disabled=false;

or jQuery as:

$("#comment").attr('disabled', false);

When you view the textarea in the debugger, what attributes does it show?

I added
$("#comment").attr(‘disabled’, false)
to the .onShow event of the form. I had tried setting the disabled property of the textarea control to false earlier. Neither of these had any effect. You can’t ‘click’ into the textarea.

The debugger shows no errors.

@PPetree, is your comment about the disabled attribute meant for this thread or another?

Also, there is a third, easier way to do this:

comment.disabled = false;

All control ids are members of the global namespace, so they can be referenced directly.

1 Like

@cindycc, I still can’t picture exactly what you’re trying to do. Rather than try to explain what you are doing in general, is there a specific operation you need to be able to do?

@cindycc What size is your font set to? (post back if you don’t know how to check this in the debugging console).

Also, in the debugging console, go into elements mode, click on the element select icon (pointer in a box) and then click on the textarea. Once that’s highlighted, copy the html and post it here so we can see what attributes are set (or not set).

Also, while you’re in the console, enter this command:

$(document).off('keypress')

And see if you can type in the textarea

AS Leader - this is what I want to be able to do in the app. On the right side will be a set of controls - labels (titles of sections the paper must contain) and text boxes (one for each title) in which the user will enter the appropriate text for the section. The user will construct the document sections on the left side of the app.
So, for example, the user might drag the third label (a title) to the left side first - they want to start with this section. Then they will drag the textarea for that title, and enter their text (this could be a lot of text). Same for each section.

The dragging and dropping is working fine. But say I drag a textarea over to the left side - I can’t click into it so I can type into it. That’s the problem I am having.

PPetree:
Here is the html for the textarea from the Element section of the debugger:

As for entering
'$(document).off(‘keypress’)

into the console - doesn’t change the behavior of the textarea control. Console did say:

In your code two places are inheriting the font size from the parent. First in the

<div id="ContextText" ...>

and again in the

<textarea id="ContactText_contents" ...>

I point this out because I (and others) have run into a problem where, when the font-family is inherited, the font-size is set to 0px and this, depending on your browser, prevents clicking on the textarea and/or typing text (more often the later).

I would suggest going into the debugger, back through the elements process and when you get to the textarea in question, click on it and then trace down through the styles panel until you find a font-size and make sure you actually have something usable.

For instance, if you debug this page and click on any of our names next to our photos you’ll see a

.name span

This has a font-size of 1em. You can turn this off and nothing happens because a parent of the .name class has also set the font-size. Because of precedence ordering within .css sometimes you have to add !important to the end of a setting to make sure it overrides a previous setting.

.name span {
  font-size: 1em !important;
}

If this doesn’t solve it, I’ll ask you to create a “fiddle” as this exercise does two things:

  1. it strips away all the surrounding code and reduces the problem to just the minimal;
  2. It will either help you find the problem, allow you to duplicate the problem or reduce this down to something within your existing development environment.

I’ll be around all weekend…

It says:
’ “

”

Didn’t see any font-size for the ‘parents’ (a container and the form)

I added a font-size of 18px to the project CSS - no change in behavior. Also changed font-size on form and container to 18px - no change.

Thoughts?

ps. Tried to do a fiddle - but I don’t know what code from the debugger to plug in. I put all the HTML from the ‘index’ but there are many .js files and .css files. I tried adding the ones that aren’t libraries but nothing was output.