I am trying out jQuery-UI drag-drop feature. I was able to easily convert a div into a droppable but making a text box a Droppable doesn't work.

jQuery('input[type=text]:visible').droppable({
    drop: function (e, ui){
        console.log('dropping',ui); //--> this never gets called
     jQuery(this).val(jQuery(ui.helper).text());
}
});

Is it the case that the default browser behavior prevents text fields and text areas from being droppables?

EDIT: It doesn't work only when the input field is a part of a draggable..

/

<span>hello world!<input></span>

$("input").droppable({
  drop: function(event, ui) {
    alert(ui.draggable.text());
  }
});

$("span").draggable({helper:function(){
    return jQuery("<span>hello</span>");
}});

I am trying out jQuery-UI drag-drop feature. I was able to easily convert a div into a droppable but making a text box a Droppable doesn't work.

jQuery('input[type=text]:visible').droppable({
    drop: function (e, ui){
        console.log('dropping',ui); //--> this never gets called
     jQuery(this).val(jQuery(ui.helper).text());
}
});

Is it the case that the default browser behavior prevents text fields and text areas from being droppables?

EDIT: It doesn't work only when the input field is a part of a draggable..

http://jsfiddle/guNTP/4/

<span>hello world!<input></span>

$("input").droppable({
  drop: function(event, ui) {
    alert(ui.draggable.text());
  }
});

$("span").draggable({helper:function(){
    return jQuery("<span>hello</span>");
}});

• javascript
• jquery
• drag-and-drop

• so you could move the whole span - with the input - into the input in it -- that cannot work... if you wrap every word in another tag, e.g. a <b>, it works very well. look at the updated example here: jsfiddle/guNTP/5 – Flo Edelmann Commented Nov 16, 2010 at 14:05
• Your error in reasoning gets clear when you replace the helper: function() {...} with helper:'clone. – Flo Edelmann Commented Nov 16, 2010 at 14:21

2 Answers 2

Yes, it can be: http://jsfiddle/guNTP/

$("#myinput").droppable({
  drop: function(event, ui) {
    $(this).val( $(this).val() + ui.draggable.text());
  }
});

$("span").draggable({revert:true});