Datei in den Bereich fallen lassen - stying

Question

Es gibt einen pluploader, es hat eine Ablagezone und seine ID ist dropFilesHere;

var uploader = new plupload.Uploader({ 
     drop_element : "dropFilesHere", 
     /*...*/ 
    }); 

Ich mag würde einige Änderungen * machen (wie Befestigungs gmail-Datei) auf der Drop-Zone, wenn der Benutzer die Datei über sie hält.

* Zum Beispiel:

.mouse_over{ 
    border-width:5px border-style:dashed #808080; 
} 

Probe:

Wie kann ich das tun?

---

uploader.bind('Init', function(up, params) { 
    $('#filelist').html("<div>Current runtime: " + params.runtime + "</div>"); 
    if(params.runtime === 'html5') { 
     $('#dropFilesHere').on({ 
      "dragenter": function(){ 
       $(this).addClass('mouse_over'); 
      }, 
      "dragleave drop": function(){ 
       $(this).removeClass('mouse_over'); 
      } 
     }); 
    } 
}); 

Answer 1

der initialisierten Laufzeit bereitgestellt ist html5, können Sie so etwas wie dies versuchen:

// the runtime has been initialized : 
var uploader = $(item).pluploadQueue(); 

if(uploader.runtime === 'html5') { 
$('li.plupload_droptext').bind('dragenter', function() { 
    $(this).css("border", "5px dashed #000000"); 
}); 

$('li.plupload_droptext').bind('dragleave', function() { 
    $(this).css("border", "0px none"); 
}); 
} 

auf Chrome getestet 18 und Firefox 11. Hope this helfen kann.

Ich realisiere ein anderes Problem ist dann nicht Drop außerhalb der Drop-Zone ...

Answer 2

Haben Sie versucht, CSS :hover Selektor?

.dropFilesHere:hover { 
    border-width:5px border-style:dashed #808080; 
} 

Sie können auch anhängen jQuery für den Client löst mit $('.dropFilesHere').mouseout() und $('.dropFilesHere').mouseenter() oder einfach nur die reine $('.dropFilesHere').hover()

Es ist immer besser, CSS zu verwenden, jetzt Tage sowieso, da es effizienter ist als JS manchmal ist.