capture d'image glissée dans un champ de texte en javascript

Question

Je souhaite autoriser un utilisateur à faire glisser une image d'une page Web dans mon application Web, puis stocker et utiliser l'URL d'image ailleurs dans l'application. Donc, je crée un champ de saisie en tant que cible de traînée.

Mais comme cela permet de supprimer tout objet Web pouvant être déplacé (comme les liens), j'ai besoin de vérifier les erreurs. Je pourrais mettre un bouton là-bas, mais ce serait plus agréable si la goutte est auto-détectée. Donc la question est ... y a-t-il des gestionnaires d'événements - principalement supportés dans IE7 et FF3 - qui sont déclenchés quand l'image est abandonnée? Cela déclenche-t-il simplement un événement de changement sur le terrain?

Answer 1

Vous ne recevrez pas un événement standard directement après drag-and-drop (seulement après avoir cliqué sur l'extérieur du champ de texte), mais vous pouvez peut-être utiliser une sorte de DragListener ...

Pour vérifier si l'URL est une image valide, il sera préférable de vérifier l'extension (JPG, PNG, GIF ...) et de vérifier si l'URL commence par "file:" - si c'est le cas, il se connecte à un fichier image local et vous devez ignorer il.

Answer 2

Non, à ma connaissance, il n'y a aucun événement qui se déclenchera dès que vous faites la chute.

Voici une solution possible:

var input = document.getElementById("input"); 
var lastVal = input.value; 

setInterval(function() { 
    if (input.value !== lastVal) { 
    if (input.value) { 
     if (/\.(jpe?g|gif|bmp|png)(\?.*)?$/.test(input.value)){ 
     alert('It\'s an image URL!!!'); 
     } else { 
     alert('Not an image URL...'); 
     } 
    } 
    lastVal = input.value; 
    } 
}, 100); 

Demo ici: http://jsbin.com/izake

Note: Il semble que certains navigateurs (IE) ne permettent pas de déposer des éléments dans des domaines tels que les autres navigateurs. Il peut être utile de créer un à partir de zéro - où tout sur la page est draggable ...