You must Login before you can answer or comment on any questions.
Hi all,
It appears that there are quite a few jira tickets related to drag and drop with Titanium Desktop 1.1 on Windows. For example:
http://jira.appcelerator.org/browse/TIDESK-278 http://jira.appcelerator.org/browse/TIDESK-67 http://jira.appcelerator.org/browse/TIDESK-17
The code sample in http://jira.appcelerator.org/browse/TIDESK-278 doesn't work for my 1.1 version of Titanium, but the ticket has been marked as closed. What's the best way to reopen this ticket or get further clarifications?
Thanks
Sean
1 Answer
after playing around for many hours I found that the problem on windows is that the dataTransfer.effectAllowed property is read only meaning that you cannot set it to "copy" or "all" to indicate that you can drop files. So I have produced a work around by storing the files you are going to drop on the ondragenter event and then detecting the drop in the onmouseover event instead. The end result is that we can detect a drop of files and get hold of all of the file information. Here is a full file that will work on windows (developed using studio 2.0).
<html>
<head>
<title>Drag and Drop in Titanium Desktop!</title>
<style type="text/css">
#holder
{
border: 10px dashed #ccc;
width: 300px;
height: 300px;
margin: 20px auto;
}
</style>
<script type="text/javascript">
/**
* bug fix since dataTransfer.effectAllowed seems to be read only.
* Therefore have to "steal" data from the drag enter event and then detect a drop.
*/
var acceptDrop = false;
var acceptFiles =[];
window.onload = function () {
var div = document.getElementById('holder');
div.ondragenter = function (e) {
acceptDrop = true;
//acceptFiles = e.dataTransfer.files;
for (var i = 0; i < e.dataTransfer.files.length; i++) { // e.dataTransfer is a DataTransfer object (https://developer.mozilla.org/En/DragDrop/DataTransfer), e.dataTransfer.files is a FileList object (https://developer.mozilla.org/en/DOM/FileList)
var file = e.dataTransfer.files[i];
var fileInfoCopy = {};
for(f in file) {
fileInfoCopy[f] = file[f];
}
acceptFiles.push(fileInfoCopy);
}
return false;
}
div.onmouseout = function(e) {
//cancel drop since left the div
acceptDrop = false;
}
div.onmouseover = function(e) {
if (acceptDrop) {
acceptDrop = false;
//once you let go of the dragged files then this event is triggered.
//so handle as if it was the ondrop.
var out = [];
for (var i = 0; i < acceptFiles.length; i++) { // e.dataTransfer is a DataTransfer object (https://developer.mozilla.org/En/DragDrop/DataTransfer), e.dataTransfer.files is a FileList object (https://developer.mozilla.org/en/DOM/FileList)
var file = acceptFiles[i]; // file is a File object (https://developer.mozilla.org/en/DOM/File)
for(f in file) {
out.push(f+"="+file[f]+"<br/>");
}
out.push("=====");
//var tiFile = Titanium.Filesystem.getFile(file.path);
// log the browser file
//console.log(file);
// log the Titanium wrapped version of this file, and that it exists
//console.log(tiFile, tiFile.exists());
// log the contents of the file, with '' appended to force the blob to convert to a string
//console.log(tiFile.read() + '');
}
document.getElementById('debug').innerHTML = out.join('');
}
}
div.ondragover = function(e) {
//e.preventDefault();
//e.dataTransfer.effectAllowed ='all';
//console.info('dragover:'+e.dataTransfer.effectAllowed);
return true;
}
div.ondrop = function (e) {
var out = [];
for (var i = 0; i < e.dataTransfer.files.length; i++) { // e.dataTransfer is a DataTransfer object (https://developer.mozilla.org/En/DragDrop/DataTransfer), e.dataTransfer.files is a FileList object (https://developer.mozilla.org/en/DOM/FileList)
var file = e.dataTransfer.files[i]; // file is a File object (https://developer.mozilla.org/en/DOM/File)
var tiFile = Titanium.Filesystem.getFile(file.path);
for(f in file) {
out.push(f+"="+file[f]+"<br/>");
}
out.push("=====");
// log the browser file
//console.log(file);
// log the Titanium wrapped version of this file, and that it exists
//console.log(tiFile, tiFile.exists());
// log the contents of the file, with '' appended to force the blob to convert to a string
//console.log(tiFile.read() + '');
}
document.getElementById('debug').innerHTML = out.join('');
e.preventDefault();
return false;
}
}
</script>
</head>
<body>
<div id="holder">
Drop files here</div>
<div id="debug"></div>
</body>
</html>
Your Answer
Think you can help? Login to answer this question!
