• From: Finland
  • Registered: 2008-02-20
  • Posts: 37

Topic: ondrop parsing

In a simple page like this:

<html>
<body>
  <form>
    <textarea>
    </textarea>
  </form>
  <img src="some/image.jpg" />
</body>
</html>

you are able to drag the image into the textarea (although I'm not sure if it's browser-specific), so that the location of the image gets inserted into the textarea.
How would one make changes to that inserted text?

  • Registered: 2009-07-31
  • Posts: 253

Re: ondrop parsing

Well, it ain't that simple.  I cannot give you a complete solution but go check out scriptaculous (http://script.aculo.us/).  It is used in Rails and has decent drag-and-drop features: drop_receiving element and draggable_element.  Google around.  (I've found this one that may be of interest to you: http://journal.dedasys.com/2006/10/25/p … draggables ).

  • From: Finland
  • Registered: 2008-02-20
  • Posts: 37

Re: ondrop parsing

Thanks, but I knew script.aculo.us already. I wanted only tiny parsing ability, so I came up with this:

<html>
  <body>
    <form>
      <textarea>
      </textarea>
    </form>
    <img src="some/picture.jpg" />

    <script type='text/javascript'>
      var dragSource = document.getElementsByTagName('img')[0];
      dragSource.addEventListener("dragend", doSomething, false);
      function doSomething(event) {
        event = (event || window.event);
        var src = event.target ? event.target.src : event.srcElement.src;
        var dragTarget = document.getElementsByTagName('textarea')[0];
        dragTarget.innerHTML = src.slice(src.lastIndexOf('/'));
      }
    </script>

  </body>
</html>

Now, I do realize this most probably contains cross-browser incompatibilities, along with bad practices (due to simplifying), but it's good enough for me.