javascript의 텍스트 필드로 이미지를 드래그

Question

사용자가 웹 페이지에서 내 웹 앱으로 이미지를 드래그 한 다음 애플리케이션의 다른 위치에 이미지 URL을 저장하고 사용하도록 허용하려고합니다. 그래서 나는 드래그 대상으로 입력 필드를 만들고 있습니다.

하지만 링크 (같은) draggable 웹 개체를 드롭 수 있으므로, 나는 어떤 오류 검사를해야합니다. 거기에 버튼을 넣을 수는 있지만 드롭이 자동 감지되면 더 좋을 것입니다.

문제는 ... IE7과 FF3에서 주로 지원되는 이벤트 핸들러가 이미지가 떨어질 때 트리거 되는가? 필드에서 변경 이벤트를 트리거하는 것입니까?

Answer 1

당신은 (단지 텍스트 필드 외부를 클릭 한 후) 드래그 앤 드롭 한 후 직접 표준 이벤트를받지 않습니다, 그러나 아마 당신은 DragListener의 어떤 종류를 사용할 수 있습니다 ... URL이 경우

확인하려면 올바른 이미지가 있다면 확장자 (JPG, PNG, GIF ...)를 확인하고 URL이 "file :"으로 시작하는지 확인하는 것이 좋습니다.이 경우 로컬 이미지 파일로 연결되므로 무시해야합니다. 그것.

Answer 2

아니요, 내 지식에 따르면, 드롭을하면 즉시 이벤트가 발생하지 않습니다. 여기

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); 

데모 : http://jsbin.com/izake

참고 :

여기에 가능한 솔루션입니다 일부 브라우저 (IE)를 사용하면 다른 브라우저와 같은 필드에 아이템을 드롭하지 않는 것으로 보인다. 처음부터 새로 만들면 가치가있을 것입니다. 페이지의 모든 부분을 드래그 할 수 있습니다. ...