Sto facendo un dilema su un'applicazione html / js Sono stato richiesto per gestire gli eventi drag'n'drop per visualizzare un'immagine rilasciata in div se non proviene da immagini che sono già visualizzate nella mia app quindi caricali pure.
Il mio problema è come saprò se si tratta di un'immagine in-app o no?
Un codice di esempio che descrive il problema è:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Drag'n'Drop demo</title>
<style>
#dropArea{
min-width:50%;
min-height:800px;
background-color:#FF00BB;
float: left;
}
#imgArea {
min-width:49%;
min-height:800px;
background-color:#0F0FBB;
float: right;
}
#imgArea img {
display:block;
margin:5px;
}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script>
var onDropCallback=function(event){
event.preventDefault();
var data = event.dataTransfer.getData("text/html");
if(data){
console.log("External Image Droped: ", data);
} else {
data = event.dataTransfer.getData("application/sample");
console.log("In app droped: ", data);
}
}
var dragSrart=function(event){
// alert("DragStarted")
console.log("Drag Started");
var data = event.dataTransfer.getData("text/html");
event.dataTransfer.clearData();
event.dataTransfer.setData('application/sample',data);
}
var ondragoverCallback=function(event){
event.preventDefault();
var elem=event.target || event.srcElement;
$(elem).css('border',"1px solid black");
}
var dragEndCallback=function(event){
event.preventDefault();
console.log("Drag End HAppened");
$("#dropArea").css('border',"none");
}
</script>
</head>
<body>
<div id="dropArea" ondragover="ondragoverCallback(event)" ondrop="onDropCallback(event)" ></div>
<div id="imgArea">
<img draggable="true" ondragstart="dragSrart(event)" ondragend="dragEndCallback(event)" src="https://kazasou.files.wordpress.com/2010/08/g288.gif"></div></body></html>Quantosopraperilproblemaècheiousountipomimepersonalizzato.Maèunabuonaideaintendoqualiproblemipotrebberocausarequestoapproccio?
Inoltre,hopensatoadunapproccioalternativoall'utilizzodegliattributidi%char_de%dihtml5sulleimmagini,adesempiodata-:
<img draggable="true" ondragstart="dragSrart(event)" ondragend="dragEndCallback(event)" src="https://kazasou.files.wordpress.com/2010/08/g288.gif" data-app>
Quindi su drop posso controllare l'html se ha l'attributo data-app corretto. Ma sono delema qual è il migliore. Posso avere qualche aiuto?