Jquery : 드롭 이벤트를 지원하지 않습니까?

내가 drop 이벤트에 이벤트 처리기를 추가하려면, 내 첫 번째 시도는 JQuery와에게 1.9.1Jquery : 드롭 이벤트를 지원하지 않습니까?

var dropIt = function (e) { 
    console.log(e); 
    console.log(e.dataTransfer); 
    e.stopPropagation(); 
    e.preventDefault(); 
} 

    $('#drop-area').on('drop',dropIt);

을 사용하는 것입니다하지만 난 기원 사용할 때이는 e.dataTransfer을 인쇄 할 수 없습니다 :

$('#drop-area')[0].addEventListener('drop', dropIt, false);

을

사용할 수 있습니까?

왜 이런 일이 발생합니까?

출처

2013-03-04 hh54188

jquery-ui를 가져 왔습니까? – KyelJmD

가능한 중복 : [데스크톱에서 파일을 업로드 할 때 드롭 이벤트에 jquery .on을 사용합니까?] (http://stackoverflow.com/questions/9544977/using-jquery-on-for-drop-events-when-uploading-files -from-the-desktop) – Boaz

@KyelJmD : jquery UI를 사용하고 싶지 않습니다. html5 끌어서 놓기를 사용하고 싶습니다. – hh54188

jQuery를 시도, 당신은 수동으로해야 할 것이다. 예 :

jQuery.event.props.push("dataTransfer");

출처

2013-03-04 05:03:29 Musa

자동으로 dataTransfer 속성을 정상화하지 않습니다

$(document).on('drop','#drop-area',dropIt);

또는

<!DOCTYPE HTML> 
<html> 
    <head> 
     <style type="text/css"> 
      #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} 
     </style> 
     <script type="text/javascript"> 
      function allowDrop(ev) 
      { 
       ev.preventDefault(); 
      } 

      function drag(ev) 
      { 
       ev.dataTransfer.setData("Text",ev.target.id); 
      } 

      function drop(ev) 
      { 
       ev.preventDefault(); 
       var data=ev.dataTransfer.getData("Text"); 
       ev.target.appendChild(document.getElementById(data)); 
      } 
     </script> 
    </head> 
    <body> 
     <p>Drag the W3Schools image into the rectangle:</p> 
     <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
     <br /> 
     <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69"> 
    </body> 
</html>

출처

2013-03-04 05:00:34

Jquery : 드롭 이벤트를 지원하지 않습니까?

답변

관련 문제