www.webdeveloper.com
Results 1 to 5 of 5

Thread: how do you find the file type of what the mouse is dragging?

  1. #1
    Join Date
    Aug 2011
    Posts
    60

    how do you find the file type of what the mouse is dragging?

    just as the title says. i have been looking for days about how to find what the mouse is dragging to switch the ondragover event between true and preventDefault. i am on 5 forums and searching every second under different terms, does this mean i'm not socializing properly or does this answer just not exist! does anyone actually read these threads?

  2. #2
    Join Date
    Apr 2006
    Location
    Perth
    Posts
    154
    Your question is something I have never had to answer myself. The logistics of
    recreating what you have is beyond my care, bother and energy. You've expressed
    yourself clearly enough but never supplied enough source for me to bother examining.

    An online attempt would be helpful. If it is a complicated setup comprising more than 2
    or 3 files, then I'd want to download the entire project as one ZIP file.

    If you can supply a concise example featuring only an in-page object or two to drag and
    a place to drag them, with a specifically acceptable external file to test, then I'd be
    willing to investigate further.

    Show me some effort and I'll return the favour.
    Colin Fiat Simple Solutions To Complex Problems

  3. #3
    Join Date
    Apr 2006
    Location
    Perth
    Posts
    154
    Ok, I did a big of digging into the contents of an onDragOver event using IE7 by
    attempting to alert(event); which caused an instant hang. Debugging IE7 and
    navigating my way up the return stack, I managed to locate a chained list of nodes.

    There are a heap of values associated with an event: mouse x and y relative to the
    page and screen, source element object, event type and so on. All the thing you
    already know or don't care about. ALT/SHIFT/CTRL keys, button number and so on.
    Even something caled 'wheelDelta' but I do not know if that has anything to do with
    the mouse wheel.

    Then I found an attribute of the event called dataTransfer:

    event.dataTransfer.dropEffect
    event.dataTransfer.effectAllowed

    Tests show that dropping an image or page text gives a dropEffect of 'copy' and
    dropping editable text gives a value of 'none'. effectAllowed always contains
    'unitialized'.

    I am still not sure how you managed to drag and drop a file object onto the browser
    without having it evaluate the type automatically and either load the object into the
    page or launch an associated application for the data type.

    Here is an example of drag and drop from Microsoft:
    http://samples.msdn.microsoft.com/wo...opEventsEX.htm

    And here are al the attributes of the onDragOver event from MS:
    http://msdn.microsoft.com/en-us/libr...=vs.85%29.aspx
    Colin Fiat Simple Solutions To Complex Problems

  4. #4
    Join Date
    Aug 2011
    Posts
    60
    ok, i'm sure it's poorly constructed but like i have about one week with javascript but two years with php
    Code:
    <?php
    
    $listen ="\n<script>
    function prDe(){ event.preventDefault(); };
    var holder = document.getElementById('article');
    holder.ondragover = function () { prDe(); };
    holder.ondrop = function (e) {
    var file = e.dataTransfer.files[0],
    reader = new FileReader();
    reader.onload = function (event) {
    var Img_Src =event.target.result;
    document.execCommand('InsertImage',null,Img_Src); };
    reader.readAsDataURL(file);
    return false; };
    </script>";
    
    //  Backup send for image upload>>>>>>>>>>>>>>>>>>>>>>>>>
    //  var xmlhttp;
    //  xmlhttp=new XMLHttpRequest(); 
    //  xmlhttp.onreadystatechange=function()
    //  {
    //  document.getElementById('condition_return').innerHTML=xmlhttp.responseText;}
    //  xmlhttp.open(\"POST\",\"index_services/upload.php\",true);
    //  xmlhttp.setRequestHeader(\"Content-Type\",\"application/x-www-form-urlencoded\");
    //  xmlhttp.send(\"send=\" + Img_Src + \"&page_pointer=$page_pointer&key=$fetch_user_session_data[0]\"); 
    //???????????????????????????????????????????????????????
    if(isset($_GET[page])){ $page_pointer =$_GET[page]; }
    else{ $page_pointer ="home"; }
    $cms_html ="
    <div id='cms_tools_upper'>
    <button onclick=\"document.execCommand('justifyleft');\">Justify Left</button>
    <button onclick=\"document.execCommand('justifycenter');\">Justify Center</button>
    <button onclick=\"document.execCommand('justifyright');\">Justify Right</button>
    <button onclick=\"mL();\">Margin Left</button>
    <button onclick=\"mR();\">Margin Right</button>
    <button onclick=\"document.execCommand('outdent');\">Outdent</button>
    <button onclick=\"document.execCommand('indent');\">Indent</button>
    <button onclick=\"document.execCommand('subscript');\"><sub style='color: inherit; font-family: inherit;'>Sub</sub>script</button>
    <button onclick=\"document.execCommand('superscript');\"><sup style='color: inherit; font-family: inherit;'>Super</sup>script</button>
    <button onclick=\"document.execCommand('strikethrough');\"><strike style='color: inherit; font-family: inherit;'>Strike</strike></button>
    <button onclick=\"document.execCommand('underline');\"><u style='color: inherit; font-family: inherit;'>U</u></button>
    <button onclick=\"document.execCommand('italic');\"><i style='color: inherit; font-family: inherit;'>i</i></button>
    <button onclick=\"document.execCommand('bold');\"><b style='color: inherit; font-family: inherit;'>B</b></button>
    <button onclick=\"document.execCommand('fontSize', false, '1');\">X1</button>
    <button onclick=\"document.execCommand('fontSize', false, '2');\">X2</button>
    <button onclick=\"document.execCommand('fontSize', false, '3');\">X3</button>
    <button onclick=\"document.execCommand('fontSize', false, '4');\">X4</button>
    <button onclick=\"document.execCommand('fontSize', false, '5');\">X5</button>
    </div>
    <div id='cms_tools_lower'>
    <div id='condition_return'></div>
    <button onclick=\"ADDsection();\">Section</button>
    <button onclick=\"document.execCommand('formatblock',false,'p');\">P</button>
    <button onclick=\"document.execCommand('formatblock',false,'H1');\">H1</button>
    <button onclick=\"document.execCommand('formatblock',false,'H2');\">H2</button>
    <button onclick=\"document.execCommand('formatblock',false,'H3');\">H3</button>
    <button onclick=\"document.execCommand('formatblock',false,'H4');\">H4</button>
    <button onclick=\"document.execCommand('formatblock',false,'H5');\">H5</button>
    <button onclick=\"document.execCommand('formatblock',false,'H6');\">H6</button>
    <button onclick=\"document.execCommand('InsertHorizontalRule');\">HR</button>
    <button onclick=\"document.execCommand('InsertUnorderedList');\">UL</button>
    <button onclick=\"document.execCommand('InsertOrderedList');\">OL</button>
    <button onclick=\"document.execCommand('insertHTML', false, prompt('HTML', ''));\">HTML</button>
    <a onclick=\"document.getElementById('slide').setAttribute('class','slide_open'); document.getElementById('ic').setAttribute('class','open');\">Image</a>
    <button onclick=\"document.execCommand('createLink', false, prompt('Enter a URL:', 'http://'));\">Link</button>
    <button onclick=\"document.execCommand('Undo');\">Undo</button>
    <button onclick=\"document.execCommand('redo');\">Redo</button>
    <a href='$site/dashboard'>Dashboard</a>
    <button onclick=\"loadXMLDoc();\">Save</button>
    <div id='ic' class='xclose'>
    <button onclick=\"document.getElementById('slide').setAttribute('class','slide_close'); document.getElementById('ic').setAttribute('class','xclose');\">Close</button>
    </div>
    <div id='slide' class='slide_close'>
    $img_lib_collapsed
    </div>
    </div>";
    $cms_css ="\n<link rel=\"stylesheet\" type=\"text/css\" href=\"index_services/cms.css\" />";
    $cms_js ="\n<script type=\"text/javascript\">
    function ADDsection() {
    var genId = \"\";
    var possible = \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz\";
    for( var i=0; i < 27; i++ )
    genId += possible.charAt(Math.floor(Math.random() * possible.length));
    var pageHolder=document.getElementById('article').innerHTML;
    modPage =pageHolder + \"<section id='\" + genId + \"' class='section' contenteditable='true'>New Section</section>\";
    document.getElementById('article').innerHTML= modPage; }
    
    function mL() {
    var setMarginLeft=prompt('Left Margin', '') +'px';
    pAry=document.getElementById('article').getElementsByTagName('section');
    for(i=0;i<pAry.length;i++)
    pAry[i].style.marginLeft=setMarginLeft; 
    }
    
    
    function mR() {
    var setMarginRight=prompt('Right Margin', '') +'px';
    pAry=document.getElementById('article').getElementsByTagName('section');
    for(i=0;i<pAry.length;i++)
    pAry[i].style.marginRight=setMarginRight; 
    }
    
    
    function loadXMLDoc()
    {
    var tmpDOC = document.getElementById('article');
    tmpDOC.focus();
    tmpDOC.setAttribute('class','blind');
    document.execCommand('SelectAll', true);
    var senDOC =encodeURIComponent(tmpDOC.innerHTML);
    var xmlhttp;
    if (window.XMLHttpRequest)
    { xmlhttp=new XMLHttpRequest(); }
    else
    { xmlhttp=new ActiveXObject(\"Microsoft.XMLHTTP\"); }
    xmlhttp.onreadystatechange=function()
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    { 
    document.execCommand('Unselect', true);
    tmpDOC.setAttribute('class','section');
    document.getElementById('condition_return').innerHTML=xmlhttp.responseText; }}
    xmlhttp.open(\"POST\",\"index_services/edit.php\",true);
    xmlhttp.setRequestHeader(\"Content-Type\",\"application/x-www-form-urlencoded\");
    xmlhttp.send(\"send=\" + senDOC + \"&page_pointer=$page_pointer&key=$fetch_user_session_data[0]\");} 
    </script>";
    
    ?>
    the variables are included as follows

    <head>
    $cms_css
    $cms_js
    </head>
    <body>
    $cms_html
    <nav></nav>
    <article contenteditable='true'>

    </article>
    $listen

  5. #5
    Join Date
    Apr 2006
    Location
    Perth
    Posts
    154
    Sorry Dorky, I have zero knowledge of PHP - none nada zip! I know JavaScript.

    Have you seen this page: https://www.ibm.com/developerworks/m...page28?lang=en

    AJAX example that does not work for me: http://blog.justswell.org/drag-and-d...ng-javascript/

    Read up on The File API

    This seems to work for images: http://www.thecssninja.com/javascript/fileapi

    Here is one which is more descriptive: http://www.ajaxline.com/drag-and-drop-files-in-browsers
    Colin Fiat Simple Solutions To Complex Problems

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles