2013-08-30 3 views
0

сегодня я делал некоторые функции перетаскивания html5. Проблема, когда я был поражен, заключалась в том, что когда я пытаюсь перетащить форму изображения из одного div и падать в другой div, чем это не работает в Firefox. Давайте посмотрим на код, указанный нижеНевозможно отбросить текст в div

<!DOCTYPE html> 
<html> 
<head> 
    <title>Setting the Drop area</title> 
    <script type="text/javascript"> 
     function Drop(event) 
     { 
      var oDiv=document.getElementById("text1"); 
      oDiv.value+=event.type+"\n"; 
      switch (event.type) 
      { 
       case "dragover": 
       case "dragleave": 
        event.returnValue=false; 
       case "dragenter": 
         event.returnValue=false; 
      } 
     } 
    </script> 
</head> 
<body> 
<h3>Drag the image from one div to another div</h3> 
<div id="div1" style="border: 2px solid black; width: 200px; height: 200px; position: relative"> 
    <img src="mine,image,life,quote,words,message-5eb746364548d71d07c86e52e63b7b56_h.jpg" width="100px" height="100px" ondragstart="Drop(event)" ondrag="Drop(event)" ondragend="Drop(event)"> 

</div> 
<div id="div2" style="border: 2px solid black; width: 200px; height: 200px; position: relative; display: block; float: right" 
     ondragenter="Drop(event)" ondragover="Drop(event)" ondragleave="Drop(event)" ondrop="Drop(event)"> 

</div> 
<div style="border: 1px solid black; position: relative; clear: both"> 
    <textarea id="text1" rows="20" cols="30"></textarea> 
</div> 

</body> 
</html> 

пожалуйста, дайте мне знать, что проблема с этим кодом

+0

Ну, вы можете начать с добавления 'break; 'вашим коммутаторам. – putvande

+0

ничего не происходит –

ответ

0

Добавить перерыв в ваших случаях переключениях и проверить текстовое поле:

КОД:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Setting the Drop area</title> 
    <script type="text/javascript"> 
     function Drop(event) 
     { 
      var oDiv=document.getElementById("text1"); 
      oDiv.value+=event.type+"\n"; 
      switch (event.type) 
      { 
       case "dragover": 
       case "dragleave": 
        event.returnValue=false; 
       case "dragenter": 
         event.returnValue=false; 
      } 
     } 
    </script> 
</head> 
<body> 
<h3>Drag the image from one div to another div</h3> 
<div id="div1" style="border: 2px solid black; width: 200px; height: 200px; position: relative;float:left;"> 
    <img src="mine,image,life,quote,words,message-5eb746364548d71d07c86e52e63b7b56_h.jpg" width="100px" height="100px" ondragstart="Drop(event)" ondrag="Drop(event)" alt="5eb746364548d71d07c86e52e63b7b56_h" ondragend="Drop(event)"/> 

</div> 
<div id="div2" style="border: 2px solid black; width: 200px; height: 200px; position: relative; display: block; float: right" 
     ondragenter="Drop(event)" ondragover="Drop(event)" ondragleave="Drop(event)" ondrop="Drop(event)"> 

</div> 
<div style="border: 1px solid black; position: relative; clear: both"> 
    <textarea id="text1" rows="20" cols="30"></textarea> 
</div> 

</body> 
</html> 

FIDDLE

Смежные вопросы