Controlling Position of Drag and Drop

2
votes

I have a textarea that starts with text I don't want the user to be able to change and are prevented in doing so by the following:

  • The left key and backspace work until it reaches the position of the undeletable text.
  • The up key has a special function and doesn't serve navigational purposes (returns false).
    • (With the previous two rules, the user cannot place the caret in this region via arrow keys)
  • When the user clicks the element, the caret is placed at the end of the textarea (on mouse down).
  • Home and ctrl+a have been handled too.

For illustration's sake, it would look something like

Don't Delete Anything Before the Colon:  Your text here.  The user text will also
wrap like this.

As far as I know, I have every situation covered but one: Drag and drop. I know how to disable drag and drop entirely, but that isn't what I want. I just don't want the 'undeletable text' to be able to be altered. Can I position the caret before allowing the drop to take place. Alternatively, can I block the drop but access the drop event and place it where I'd like?

2
javascriptevent-handlingdrag-and-drop
Why does the text have to be in the textarea? Just put it outside beside the textarea in a span and make your life simpler. Referring to your question, I'm not sure, but I don't think you can set caret position ondragover – Some Guy
I was originally going to try something like that but want the text to be able to wrap under the 'undeletable text'. I started off using a text input field and adding one for each new line but it was getting ugly. – Gary

2 Answers

3
votes

I worked out a solution. It depends on jQuery, but a skilled JS programmer could easily remove that dependency I'm sure.

Live Demo: http://trafnar.github.com/permastring/

JS Code: https://github.com/trafnar/permastring/blob/master/permastring.js

Github Repo: https://github.com/trafnar/permastring

It works by constantly storing the value of the text field then basically 'undoing' any change that alters the permanent string.

The biggest drawback I've noticed so far is that it ruins the users ability to do select all + delete. Edit: I've fixed this drawback, it's now possible to select all and delete.

1
votes

I figured it out, here's the gist:

To avoid confusion, I first "hid" the caret OnDragOver and OnDragEnter.

function(event){
  event.preventDefault ? event.preventDefault() : event.returnValue = false;
}

Then I blocked OnDrop, but placed the data where I wanted.

function(event){
  element.value += event.dataTransfer.getData("Text");
  event.preventDefault ? event.preventDefault() : event.returnValue = false;
}