ansaurus

Question

Drag and Drop links into an input box using jQuery

Answer 1

+3 A:

Seems simple enough; at least in my browser (Chrome) dragging a link into a input/textarea and having it populate with the URL that the anchor references is default functionality; therefore the following should do the job.

$("input").change(function() {
  if($(this).val().substring($(this).val().length-3, $(this).val().length) == 'jpg') { 
    $("a img").attr('src', $(this).val())
  } else {
    $("a").attr('href', $(this).val())
  }
})

Obviously you'd want to expand the code to support further filetypes and I'm sure there are better way to identify whether the URL refers to an image or not, but this is a good starting point.

If this doesn't serve your exact needs you might want to consider what event to bind on the input box in question; focus could also be a viable option?

Steve 2010-08-28 16:48:10

Thank you Steve, I will give this a shot on Monday (fingers crossed).

chainwork 2010-08-29 01:31:23

Works in FF but for some reason not in IE. I saw another question that states IE does not have the dragging of links into text area enabled. I still need to figure out how to wrap the links in img src= and <a href= tags. Sigh... Going to be a long day =]

chainwork 2010-08-30 17:28:47

I don't have a solution as to how to get inputs to populate from a drag in IE off the top of my head. I have however provided you with the latter pretty much. My example takes the assumption you have existing elements to change; if you don't then try the following: `$("<a/>").attr('href', $(this).val()).text($(this).val()).appendTo('body')`. That creates an anchor and then appends it to the body tag of your page.

Steve 2010-08-30 18:43:26

ansaurus

tags:

views:

answers:

Drag and Drop links into an input box using jQuery

related questions