JQuery UI droppable поведение в Internet Explorer

Может кто-то пролить свет на то, почему следующий минимально простой тест ведет себя по-разному в IE по сравнению с Chrome и FF?JQuery UI droppable поведение в Internet Explorer

В частности, на IE красный флажок «Drop Here» перемещается, когда на него падает желтая коробка.

(Как ни странно, этот фрагмент кода, кажется, работает, как ожидалось, когда я спрашиваю IE эмулировать IE 7, но странное поведение показывает на IE 8, 9 и 10)

http://jsfiddle.net/zuilserip/8w47sc39/

Любые мысли, почему? Какие-либо обходные пути для обеспечения последовательного поведения?

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
      .DropBox { 
       float: left; 
       width: 75%; 
       line-height: 70px; 
       text-align: center; 
       background-color: yellow; 
      } 

      .TargetBox { 
       margin-left: 80%; 
       width: 20%; 
       line-height: 70px; 
       text-align: center; 
       background-color: red; 
      } 
     </style> 

     <script> 
      $(function() { 
       $(".DropBox").draggable({revert: "invalid" }); 
       $(".TargetBox").droppable({ 
        drop: function (event, ui){ 
         $(ui.helper).hide("highlight",2000);} 
       }); 
      }); 
     </script> 
    </head> 

    <body> 
     <div class="DropBox">Drop Me</div> 
     <div class="TargetBox">Drop Here</div> 
    </body> 
</html>

источник

2014-12-28 user2712912

Я выполнил ваш код в JsFiddle в IE11, и, как и ожидалось, он не сработал. Dropbox не перетаскивался.

Я пошел вперед и внес некоторые изменения в JsFiddle. К счастью, я был в состоянии заставить его работать как в IE11 и Firefox:

http://jsfiddle.net/8w47sc39/4/

$(function() { 
    $(".DropBox").draggable({ 
     revert: false 
    }); 
    $(".TargetBox").droppable({ 
     drop: function (event, ui) { 
      $(ui.helper).hide("highlight", 2000); 
     } 
    }); 
});

Ниже приводится краткое описание изменений:

Я изменил свойство REVERT из перетаскиваемых в " true "- именно так оно имеет определенное логическое значение
В раскрывающемся списке« Рамки и расширения »я выбрал« Нет библиотеки (Pure JS) »
В Exte rnal вкладка Ресурсы Я добавил FFG:
- http://code.jquery.com/ui/1.11.2/jquery-ui.js
- http://code.jquery.com/jquery-1.10.2.js

Эти ресурсы являются в основном ссылки из перетаскиваемом образца в месте JQuery:

http://jqueryui.com/draggable/#default

источник

2014-12-29 21:25:06

Спасибо вы, Роман, ваши изменения определенно исправили некоторые проблемы. Хотя первоначальный вопрос, который у меня был, остается. Даже в вашем коде. В частности, если вы запустите код в IE, поле «Drop Here» сдвинется вправо в течение 2 секунд, чтобы поле «Drop Me» исчезло. Этого не происходит ни в Chrome of FF. – user2712912

ответ

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