OnDrop передает событие к URL, но только в FireFox

  <script type="text/javascript" src="jquery-2.0.3.min.js"></script> 
      <style> 
      .canvas { 
       position:relative; 
       height:550px; 
       width:400px; 
       background:Yellow url("http://www.mapstop.co.uk/images/uploaded/lrg_wg2668.6a40d0d.jpg") no-repeat; 
      } 
      .canvas img { 
       position:absolute; 
      } 
      </style> 
      <div class="toolbar"> 
      <span>Drag...</span> 
      <img src="http://cdn4.iconfinder.com/data/icons/iconsland-weather/PNG/48x48/Sunny.png" alt="" title="" /> 
      <img src="http://cdn4.iconfinder.com/data/icons/iconsland-weather/PNG/48x48/Thermometer_Snowflake.png" alt="" title="" /> 
      <img src="http://cdn4.iconfinder.com/data/icons/iconsland-weather/PNG/48x48/Overcast.png" alt="" title="" /> 
      <img src="http://cdn4.iconfinder.com/data/icons/iconsland-weather/PNG/48x48/Night_Rain.png" alt="" title="" /> 
      </div> 
      <div class="canvas"></div> 
      <script type="text/javascript"> 
      $(document).ready(function() { 
       var $toolbar = $(".toolbar"); 
       var $tools = $toolbar.find("img"); 

       //define drag and drop handlers 
       $toolbar.on("dragstart", "img", onDrag); 

       $(".canvas").on({ 
        dragenter: false, 
        dragover: false, 
        drop: onDrop 
       }); 

       //handle commencement of drag 
       function onDrag(e) { 

        console.log("onDrag"); 
       } 

       //handle drop 
       function onDrop(e) { 

        //console.log("OnDrop"); 
        //console.log(e.clientX); 
        //console.log(e.clientY); 
        //console.log(e.originalEvent); 
       } 
      }); 
      </script>

Когда я падаю изображение я получаю пересылаемой по какой-то причине в http://cdn4.iconfinder.com/data/icons/iconsland-weather/PNG/48x48/Sunny.png, но только в FireFox. И Chrome, и IE, похоже, принимают намеченное поведение, которое говорит, что ничего не делает прямо сейчас. Возможно, кто-то может знать, почему это происходит?OnDrop передает событие к URL, но только в FireFox

источник

2013-10-06 Giuseppe

Попробуйте указать обработчики для перетаскивания и перетащите и добавьте e.preventDefault(); и e.stopPropagation(); к вашим обработчикам.

источник

2013-10-06 00:37:32 Musa

Это не имело никакого эффекта. Код по-прежнему пересылается по URL-адресу, но только в FireFox. Это очень странно. – Giuseppe

У меня очень похожий код, я могу вернуться к тому, что выглядит очень похоже, но не пересылает URL-адрес в FireFox. Должно быть какие-то детали, вызывающие это, о котором я сейчас не знаю. – Giuseppe

@ user2209542 попробуйте добавить 'e.preventDefault();' и 'e.stopPropagation();' вашим обработчикам – Musa

OnDrop передает событие к URL, но только в FireFox

ответ

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