Title: textarea (multiline-textbox) file drop [solved]
Post by: devnull on January 02, 2016, 07:15:06 PM
I am trying to create a droppable textarea, where the contents of the dropped file are loaded into the textarea. The following code will work in a non easyui-element, but how can I get this to work on a multiline textbox ?
<input class="dropbox">
$(".dropbox").on("dragenter",dropbox).on("drop",dropbox).on("dragleave",dropbox);
function dropbox(e) {
var me =$(this);
e.stopPropagation(); e.preventDefault();
if (e.type == 'dragenter') me.addClass('over');
else if (e.type == 'dragleave') me.removeClass('over');
else if (e.type == 'drop') {
var reader = new FileReader ();
reader.onloadend = function (e) {
me.val(this.result);
};
reader.readAsText (e.originalEvent.dataTransfer.files[0]);
me.removeClass('over');
}
}
Title: Re: textarea (multiline-textbox) file drop
Post by: devnull on January 02, 2016, 09:32:58 PM
OK, I managed to solve this: http://jsfiddle.net/unh0y3ma/5/ You can drag and drop a text file onto the textarea and it will get populated with the contents. However, is it possible to call an event from the html rather than from javascript, something like this: <input id="myinp" class="easyui-textbox" data-options="multiline:true,onCreate:dropbox" style="width:200px; height:200px"/>
Title: Re: textarea (multiline-textbox) file drop
Post by: jarry on January 03, 2016, 09:06:16 AM
The better way to solve this issue is to extend a new method. <script>
$.extend($.fn.textbox.methods, {
dropbox: function(jq){
return jq.each(function(){
var target = this;
var opts = $(target).textbox('options');
opts.onDrop = opts.onDrop || function(){};
var t = $(this).textbox('textbox');
t.on('dragenter', dropbox).on('dragleave', dropbox).on('drop', dropbox);
function dropbox(e) {
var me =$(this);
e.stopPropagation(); e.preventDefault();
if (e.type == 'dragenter') me.addClass('over');
else if (e.type == 'dragleave') me.removeClass('over');
else if (e.type == 'drop') {
var reader = new FileReader ();
reader.onloadend = function (e) {
me.focus();
me.val(this.result);
opts.onRead.call(target);
};
reader.readAsText (e.originalEvent.dataTransfer.files[0]);
me.removeClass('over');
}
}
})
}
});
$(function(){
$('#myinp').textbox('dropbox');
});
</script>
<input id="myinp" class="easyui-textbox" data-options="multiline:true,onRead:onRead" style="width:200px; height:200px"/>
|